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>