javascript - angularjs 指令不适用于动态内容

Question

你好，我已经创建了一个 Angular Directive(指令)来添加一个 bakcground 并使其宽度等于高度(1:1)方形 div

app.directive('backImg', function($timeout){
return function(scope, element, attrs){
    $timeout(function(){
            var url = attrs.backImg;
            console.log(attrs);
            console.log("after printing attrs");
            if (url == null || url == ""){
                    url="/web/header.png";
            }
            element.css({
                    'height' :  element[0].offsetWidth,
                    'margin-bottom' : '20px',
                    'background-image': 'url(' + url +')',
                    'background-size' : 'cover',
                    'background-repeat': 'no-repeat',
                    'background-position': 'center center',
            });
    });
    };
});

该指令对首次加载页面时出现的元素工作正常

....一些 HTML

 <div back-img="{{group.images[0].path}}"> </div> ---> Working fine

....更多 HTML

这次不工作，唯一的区别是它在 sessionSelected 为真时显示。

<div class="row" id="active-session" ng-show="userCtrl.sessionSelected">
    <div back-img="{{group.images[0].path}}"> </div> ---> Not working Working
</div>

你能帮我解决这个问题吗

编辑我看起来指令在未显示时被调用(ng-show)，因此 group.images[0].path 为空。

如何在可见时调用指令？？。我想这会是这样的

在这里您可以看到元素在显示时填充了正确的 img 路径

FIREFOX 调试

<div back-img="/web/uploads/56f7f53a2b82bbf75033559a/nKj0DMZrVt.jpeg"></div>

Answer 1

您创建了 <div back-img="{{group.images[0].path}}">并使用 element[0].offsetWidth当元素在 display:none 上时css(因为 ng-show=true 属性)。所以为了让它工作你需要改变ng-show至 ng-if .这样，当您将标志更改为 true 时，它​​会重新绘制 html，然后这将调用 link directive 中的函数

编辑

您始终可以使用 $watch检查 url 中的更新并在更新发生时触发更改的函数

app.directive('backImg', function($timeout){
  return function(scope, element, attrs){
    scope.$watch(attrs.backImg,function(){
            var url = attrs.backImg;
            console.log(attrs);
            console.log("after printing attrs");
            if (url == null || url == ""){
                    url="/web/header.png";
            }
            element.css({
                    'height' :  element[0].offsetWidth,
                    'margin-bottom' : '20px',
                    'background-image': 'url(' + url +')',
                    'background-size' : 'cover',
                    'background-repeat': 'no-repeat',
                    'background-position': 'center center',
            })
        })
    };
});