angularjs定制指令值的变化 [英] angularjs custom directives value change
问题描述
我有以下的code（它不工作的jsfiddle但它如果你将它保存为index.html的）
I have the following code (it does not work on jsfiddle but it does if you save it as index.html)
<!DOCTYPE html>
<html ng-app="app">
<head>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min.js"></script>
<script>
var photos = [
{"url":"http://archive.vetknowledge.com/files/images/guinea-pig---tan.jpg"},
{"url":"http://www.rfadventures.com/images/Animals/Mammals/guinea%20pig.jpg"}
];
angular.module('app', [])
.directive('ngBackground', function(){
return function(scope, element, attrs){
var url = attrs.ngBackground;
element.css({
'background-image': 'url(' + url + ')',
'background-size' : 'cover'
});
};
})
.controller('PhotosCtrl', function($scope){
$scope.photos = photos;
$scope.flags = {
modalOpen: false,
imgSrc: null
};
$scope.doModal = function(url){
if(url != false) {
$scope.flags.imgSrc = url;
$scope.flags.modalOpen = true;
} else $scope.flags.modalOpen = false;
};
$scope.sourcifier = function(url){
var temp = document.createElement('a');
temp.href = url;
if(temp.hostname.substring(0, 4) == 'www.')
return temp.hostname.substring(4);
else return temp.hostname;
};
});
</script>
</head>
<body>
<div ng-controller="PhotosCtrl">
<div ng-repeat="photo in photos" class="item">
<img ng-src="{{photo.url}}" ng-click="doModal(photo.url)">
<p><a ng-href="{{photo.url}}" target="_blank">{{sourcifier(photo.url)}}</a></p>
</div>
<div ng-show="flags.modalOpen" ng-click="doModal(false)">
<div ng-background="{{flags.imgSrc}}">my background should be of the clicked image</div>
</div>
</div>
</body>
</html>
这基本上加载图像形成阵列照片并显示它们。我试图实现是使用自定义创建NG-背景指令的div的背景图像更改为被点击图片src。
That basically loads the images form the array "photos" and displays them. What I am trying to achieve is to use a custom created ng-background directive to change the background image of a div to the clicked image src.
它不工作了！现在，我amsure那flags.imgSrc是正确的，因为如果我用NG-SRC的img标签，它的确实的工作。这似乎更像是定制指令NG-背景不刷新该标志的值。
It does not work at all! Now, I amsure that flags.imgSrc is correct, since if I use ng-src on an img tag, it does work. It seems more like that the custom directive ng-background does not "refresh" the value of that flag.
任何想法，为什么以及如何可以解决吗？先谢谢了。
Any ideas why and how this could be fixed? Thanks in advance.
推荐答案
您需要的 $观看 为 flags.imgSrc 的变化：
.directive('ngBackground', function(){
return function(scope, element, attrs){
var url = attrs.ngBackground;
scope.$watch(url,function(n,o){
if(!n) return;
element.css({
'background-image': 'url(' + n + ')',
'background-size' : 'cover'
});
},true);
};
});
看看： http://plnkr.co/edit/JXmG7L?p = preVIEW
更新：但是听元素 <$ C $的正确方法C>属性 '的变化是的 $观察方法：
UPDATE: But the proper way to listen to element' attributes' changes is $observe method:
attrs.$observe("ngBackground",function(n,o){ /* same handler code */ });
更新普拉克： http://plnkr.co/edit/fOOCOd?p= preVIEW
这篇关于angularjs定制指令值的变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
