Question

我在这里提到了之前提出的问题 - ＆gt; same kind of 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>

这是我的指示.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

它没有显示，因为您正在使用隔离范围，但尚未传入标头html。因此，您的指令模板中的当前{{headerHTML}}未定义。将您的孤立范围更改为：

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

你的HTML要：

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

ng-show和ng-bind-html在一个独立的范围内 - 指令不起作用

1 个答案: