動的データで動作しない角度指令は$ httpから来ます

Question

画面サイズに応じて画像ソースを変更する角度指示があります。静的コンテンツではうまく動作していますが、$ http要求からの動的データは機能しません。データは$ HTTPリクエストとディレクティブから取得するのと同じである静的データ$ HTTP

<div ng-repeat="slideContent in vm.slides track by $index" > 
     <div ng-bind-html="vm.getHtml(slideContent)"></div> 
    </div> 

から

マイディレクティブ

app.directive("changeOnScreenResize", ["$window", function($window) { 
    return { 
    restrict: 'A', 

    link: function(scope, elem, attrs) { 

     $window.onresize = function() { 
     changeImage(); 
     scope.$apply(); 
     } 
     changeImage(); 

     function changeImage() { 

      scope.screenWidth = $window.innerWidth; 

     if(scope.screenWidth <= 600) { 
      elem.attr('src', attrs.small); 
      console.log(attrs.small); 
     } 
     else { 
      elem.attr('src', attrs.big); 
     } 
     } 
    } 
    }; 
}]); 

動的データコールは、この場合には正常に動作しています。

<img change-on-screen-resize src="abc.jpg" small="xyz.jpg" big="abcd.jpg" > 

Answer 1

問題は、アプリケーションを再コンパイルせずに新しいHTMLをスコープに挿入していることです。だから角度は、子供の要素の中で何がchange-on-screen-resizeの意味か分かりません。あなたが成功した新しいHTMLとDOMをロードした後$compileを呼び出すための新しいディレクティブを作成する必要がありますhttp://plnkr.co/edit/NJJjgoMuhnDRjnE2jNYE?p=preview

：

は、この作業のデモをご覧ください。

app.directive('bindUnsafeHtml', ['$compile', 
    function($compile) { 
    return function(scope, element, attrs) { 
     scope.$watch(
     function(scope) { 
      // watch the 'bindUnsafeHtml' expression for changes 
      return scope.$eval(attrs.bindUnsafeHtml); 
      //return element.children(); 
     }, 
     function(value) { 
      // when the 'bindUnsafeHtml' expression changes 
      // assign it into the current DOM 
      element.html(value); 

      // compile the new DOM and link it to the current scope 
      // NOTE: we only compile .childNodes so that 
      // we don't get into infinite loop compiling ourselves 
      $compile(element.contents())(scope); 
     } 
    ); 
    }; 
    } 
]);