javascript - 更新图像网址时，图像不会在前端呈现

Question

我编写了一个指令来呈现页面的屏幕截图，如果屏幕截图可用，否则它会显示一个占位符。

commonDirectives.directive("showScreenShot", function () {
return {
    restrict: 'A',
    replace: true,
    scope:{},
    link: function(scope, element, attrs){
        var template = '';
        if(attrs.url){
            template += '<div><img src=' + attrs.url + '></div>';
        }
        else{
            template += '<div class="placeholder"></div>'
        }
        element.replaceWith(template)
    }
}
})

第一次可以正确渲染图像，但第二次渲染失败。无法显示图像。我不明白为什么即使图像 url 指向正确的图像，它也无法渲染图像。

更新

如果我想做一些事情，比如在 10 秒的时间等待后重新渲染图像，我不能使用 $watch，因为 URl 保持不变，但给定 url 处的图像会在 10 秒后更新:

commonDirectives.directive("showScreenShot",['$timeout', function ($timeout) {
return {
    restrict: 'A',
    replace: true,
    scope:{
        url: '@'
    },
    template: '<div ng-if="!url" class="dbimg placeholder">' +
    '<div class="phicons">' +
    '   <i class="phicn icon2-bars-3 p1"></i>' +
    '   <i class="phicn icon2-stats p2"></i>' +
    '   <i class="phicn icon2-graph p3"></i>' +
    '   <i class="phicn fa fa-table p4"></i>' +
    '</div>' +
    '</div>',
    link: function(scope, ele, attrs) {
        var template;
        if(attrs.url){
            template = '<div class="snapshotmsg">Generating preview ...</div><div class="dbimg placeholder">';
            $timeout(function () {
                template = '<div class="db_img"><img ng-src="' + attrs.url + '"></div>'
                ele.replaceWith(template)
            }, 10000);
            ele.replaceWith(template)
        }
    }
}

}]);

Answer 1

当 link 函数运行时(首次编译指令时)，您生成的模板将添加到 DOM 中。稍后，当您更改 url 属性时，没有任何内容会触发 DOM 中的更改。

最简单的方法是使用 url 的隔离范围属性而不是属性。如果您只是通过重用内置指令来巧妙地模板化您的指令，您甚至不需要 link 函数。

.directive("showScreenShot", function () {
  return {
    restrict: 'A',
    scope:{
       url: "@"
    },
    template: '<div ng-if="url"><img ng-src="{{url}}"/></div>' + 
              '<div ng-if="!url" class="placeholder"></div>'
  }
})