動態傳遞HTML內容角指令爲屬性

Question

我試圖動態加載採用了棱角分明存儲在一個JSON文件一些HTML。

我通過閱讀JSON數據到一個範圍，並把它傳遞給我寫了裝載HTML到模板中的指令這樣做。

控制器

.controller('testCtrl', function($scope, $http, $state){ 

    $http.get('views/foo.json').then(function(res){ 

     $scope.somehtml = res.data; 

    }); 

}) 

指令

.directive('loadHtml', function($compile){ 

     return { 
     restrict: 'AE', 
     scope: { 
      content: "@", 
     }, 
     link: function(scope, element, attrs) { 
      scope.content = attrs.content; 
      element.html(scope.content).show(); 
      $compile(element.contents())(scope); 
     }, 
     template: '{{content}}' 
    }; 

}) 

這工作！

<load-html content="hello success"></load-html> 

這不：（

<load-html content="{{somehtml}}"></load-html> 

缺少什麼我在這裏？

Answer 1

找到了解決辦法我自己，也許這可以幫助別人：

我需要「觀察「該指令的屬性值

新指令：

.directive('loadHtml', function($compile){ 

    return { 
     restrict: 'AE', 
     scope: {}, 
     link: function(scope, element, attrs) { 

      attrs.$observe('content', function(val) { /* $observing the attribute scope */ 
       scope.content = val; 
       element.html(scope.content).show(); 
       $compile(element.contents())(scope); 
      }) 
     }, 
     template: '{{content}}' 
    }; 
})