ng-show 与 ng-bind-html 在隔离范围内 - 指令无效

Question

我在这里提到了之前提出的问题 ->

但答案没有帮助。

这是我的主人HTML:

<!--ss.com header starts here-->
       <ss-header show="showHeader"></ss-header>
<!--ss.com header ends here-->

{{headerHTML}} 不显示以下模板中的 HTML：

这是我的指令模板 - ss_header.html:

<header data-ng-show="{{show}}">
    <div class="ss-header" data-ng-bind-html="headerHTML|convertAsHtml"></div>

</header>{{headerHTML}}

<div data-ng-show="{{show}}">Sample text to show ng-show is working properly in this directive.</div>

这是我的directive.js

smartPrintApp.directive("ssHeader", ['$compile', function($compile) {
  return {
    restrict: "E", //directive for element only 
    //replace: true, //replace the custom tag
    scope:{
        show:'=show'
    },
    link: function(scope, element, attrs) {
             scope.$watch(attrs.unsecureBind, function(newval) {
                  element.html(newval);
                  $compile(element.contents())(scope);
             });
    },  
    templateUrl: 'common/header/ss_header.html',
  }
}]);

这是我的控制器：

var smartPrintApp = angular.module("smartPrintApp",['ngRoute','ngResource','ngCookies', 'ngAria', 'ngAnimate']);

smartPrintApp.filter("convertAsHtml", ['$sce', function($sce){ return $sce.trustAsHtml}]);

smartPrintApp.controller("dotComController",['$scope', '$resource', 'serviceInfo', 'fetchLocalData', 'fetchServiceData', '$sce', '$window', '$http',   '$compile', '$interpolate', function($scope, $resource, $service, fetchLocalData, fetchServiceData, $sce, $window, $http, $compile, $interpolate) {

    /* Get Data from Server */
    var reqData = {
        "key1":"value1",//variables to send if needed
        "key2":"value2"//variables to send if needed
    };
    var generalServ = new fetchServiceData($service.api.SERV_RESP);

    generalServ.save(reqData).$promise.then(function(response){

        /* Site Layout Modifications */
        $scope.headerHTML = $interpolate(response.siteLayout.headerHtmlContent)($scope);
        $scope.showHeader = response.siteLayout.headerEnabled;
        /* Site Layout Modifications */

    },function(err){
        console.log('error in fetching service data')
    });
    /* Get Data from Server */
}]);

感谢任何帮助。

Answer 1

它没有显示，因为您使用的是独立作用域，但尚未传入 header html。所以目前 {{headerHTML}} 在你的指令模板中是未定义的。将您的隔离范围更改为：

scope:{
    show:'=show',
    headerHTML: '=header'
},

你的 HTML 到：

<ss-header show="showHeader" header="headerHTML"></ss-header>

ng-show 与 ng-bind-html 在隔离范围内 - 指令无效

ng-show along with ng-bind-html in an isolated scope - directive is not working

angularjs

angularjs-directive

angularjs-ng-show