我有一个自定义指令来在元素上应用背景图像,并且我希望它在范围更改时刷新 UI。
阅读完如何操作后,我添加了 $watch
来观察范围变化,但我在 ng-repeat
中使用了该指令,所以我无法传递范围变量到它。
当item.Url
更改时,该指令不会刷新background-url。
我的指令:
.directive('bgImage', function () {
function applyBackgroundImage(element, url) {
if (!element || !url) { return; }
element.css({ 'background-image': ['url(', url, ')'].join('') });
};
return {
restrict: 'A',
link: function ($scope, element, attrs) {
if (!attrs.bgImage) { return; }
if ($scope.hasOwnProperty(attrs.bgImage)) {
$scope.$watch(attrs.bgImage,
function(newValue, oldValue) {
if (newValue == oldValue) { return; }
if (!newValue) { return; }
applyBackgroundImage(element, newValue);
});
} else {
applyBackgroundImage(element, attrs.bgImage);
}
}
};
})
用法:
<div class="item-box" ng-repeat="item in items">
<div bg-image="{{item.PictureUrl}}">
</div>
</div>
最佳答案
这可能会有帮助。
$scope.$watch(function() {
return attrs.bgImage
},
function(newValue, oldValue) {
if (newValue == oldValue) { return; }
if (!newValue) { return; }
applyBackgroundImage(element, newValue);
});
关于javascript - 范围更改后指令未刷新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43157031/