HTMLコンテンツをAngularディレクティブに属性として動的に渡す

Question

Angularを使用して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}}' 
    }; 
})