NG秀 - 指令不能正常工作

Question

我都提到这里以前问的问题 - >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> 

这是我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

它不会显示，因为您使用的是隔离范围，但没有通过标题html。所以目前你的指令模板中的{{headerHTML}}是未定义的。你的隔离范围变更为：

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

和你的HTML：

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