![](/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.