Question

您好我已创建一个角度指令来添加一个bakcground并使其宽度等于高度（1：1）square 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为true则显示。

<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为null。

如何在可见时调用指令??我认为这将是方式

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

FIREFOX调查

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

Answer 1

您创建<div back-img="{{group.images[0].path}}">并在元素位于element[0].offsetWidth css时使用display:none（因为ng-show=true属性）。因此，为了实现此目的，您需要将ng-show更改为ng-if。这样当你将标志更改为true时，它会再次绘制html，然后这将调用link

中的directive函数

修改

您始终可以使用检查网址中的更新的$watch函数及其发生时触发更改

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', }) }) }; });

angularjs指令不使用动态内容

1 个答案: