0

我在这里提到了先前提出的问题->相同的问题

但答案没有帮助。

这是我的主 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 */
}]);

任何帮助表示赞赏。

4

1 回答 1

1

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

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

和你的HTML：

<ss-header show="showHeader" header="headerHTML"></ss-header>
于 2015-05-12T12:02:19.273 回答