Javascript Angular指令不处理来自$http的动态数据

我有一个angular指令根据屏幕大小更改图像源。它可以处理静态内容，但不能处理来自$http请求的动态数据

我的指令

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);
        }
      }
    }
  };
}]);

app.directive（“changeOnScreenResize”、[“$window”、函数（$window）{
返回{
限制：“A”，
链接：功能（范围、要素、属性）{
$window.onresize=function（）{
changeImage（）；
作用域：$apply（）；
}
changeImage（）；
函数changeImage（）{
scope.screenWidth=$window.innerWidth；
如果（scope.screenWidth，问题是您正在将新的HTML插入到您的作用域中，而没有重新编译应用程序。因此angular不知道子元素中的
更改屏幕大小
意味着什么

请参阅此工作演示：

在成功地用新HTML加载DOM之后，您需要发出一个新指令来调用
$compile

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);
        }
      );
    };
  }
]);

问题是你在没有重新编译应用程序的情况下将新的HTML插入到你的作用域中。因此angular不知道子元素中的
在屏幕上改变大小
意味着什么

请参阅此工作演示：

在成功地用新HTML加载DOM之后，您需要发出一个新指令来调用
$compile

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);
        }
      );
    };
  }
]);

vm.slides
看起来像什么？为什么必须通过函数获取
HTML
？实际上，每个幻灯片图像都有不同的HTML页面，我们必须通过ajax调用获取，并将其设置在[vm.slides]数组中，然后通过[ng repeat]进入视图你能粘贴一个示例JSON吗？我们没有JSON，我们得到的响应是html字符串“vm.slides
是什么样子的？为什么你必须通过一个函数来获得
html
？实际上每个幻灯片图像都有不同的html页面，我们必须通过ajax调用来获得，并将其设置在[vm.slides]数组中，然后通过[ng repeat]进入视图你能粘贴一个JSON示例吗？我们没有JSON，我们得到的响应是html字符串“”
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);
        }
      );
    };
  }
]);