![](/img/trans.png)
[英]How to observe or watch an input attribute change in an AngularJS Service?
[英]AngularJS : watch/observe attribute change
我想通过它的id更新元素的属性,并让元素对此更改做出反应。
我试图创建一个plunkr来反映我的情况,但我似乎无法让ng-click工作。
但是,我想要做的是调用执行以下操作的函数
var cell = angular.element(document.querySelector('#' + cellName));
cell.attr('card-id', id);
这似乎有效,根据我可以在这些线之后直接读出的值。
接收元素如下所示:
deckbuilderApp.directive('card', function() {
return {
restrict: 'E',
replace: true,
templateUrl: 'tpl/deckCard.tpl.html',
scope: {
cardId: '=cardId'
},
link: function(scope, element, attrs) {
attrs.$observe('cardId', function(newId) {
console.log('observe cardId: new Value: ' + newId);
console.log('observe cardId: id: ' + scope.id + ' scope:' + scope);
});
scope.$watch('cardId', function(oldValue, newValue) {
console.log('$watch cardId: ' + oldValue + ' -> ' + newValue);
});
attrs.$observe(function() { return attrs.cardId }, function(newId) {
console.log('ssssobserve card-id: new Value: ' + newId);
console.log('sssssobserve card-id: id: ' + scope.id + ' scope:' + scope);
});
scope.$watch(function() { return attrs.cardId }, function(oldValue, newValue) {
console.log('sssssssssss$watch card-id: ' + oldValue + ' -> ' + newValue);
});
console.log('linked card directive');
}
}
});
当我通过ng-repeat设置值时,手表和观察者函数(“ssssobserver”除外)会被初始化调用。
对card-id属性的后续更改不会触发监视或观察者代码。
为了让这个工作,我需要做什么?
这里有很多事情阻止这种情况发生。 我给出的主要建议是更好地学习Angular的习惯(可能还有一些教程),并记下jQuery的做法。 Angular为您提供了通过javascript执行几乎所有操作的路径,因此如果您发现自己正在操纵DOM元素,请退后一步尝试不同的东西。
最明显的改进是使用Angular的内置消息传递工具,而不是试图通过操纵DOM来实现自己的工作。 为了这些目的,Angular提供$rootScope.$on
, $rootScope.$broadcast
和$rootScope.emit
。
还有双向绑定的概念,如你在plunkr中所尝试的那样,这是不可能的替换。 我已经分叉了另一个,并让它工作,所以看看,看看你可以做不同的方式。
http://plnkr.co/edit/eqZQ0iptzKAInEYxEyLp?p=preview
这绝不是“理想的”代码 - 只是功能性的。 继续努力学习工具集,你会很好。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.