0
以下是指令。我认为我的指令中缺少一些东西,可以使它知道$ scope中的更改。即使范围变量已被修改,AngularJS指令也不会更改
'use strict';
app.directive('backImg', function(){
return function(scope, element, attrs) {
var url = attrs.backImg;
element.css({
'background-image': 'url(' + url +')',
'background-size' : 'cover'
});
};
});
,这里是我的控制器中的HTML
<div back-img="{{url}}">
</div>
,我有
$scope.url = 'image/placeholder.jpg';
然后我也有一个按钮,改变$ scope.url的价值。
$scope.changeImage = function() {
$scope.url = 'image/newimage.jpg';
}
我可以看到在DOM中的变化,但所显示的背景图像仍然显示旧的图像,其是placeholder.jpg。我注意到,在调用changeImage()函数后,这两个URL都在DOM中。
<div back-img="http://localhost:9000/image/newimage.jpg" style="background-image: url(http://localhost:9000/image/placeholder.jpg); background-size: cover;">
</div>