AngularJS:观察/观察属性的改变

AngularJS : watch/observe attribute change

本文关键字：观察 改变 属性 AngularJS      更新时间：2023-09-26

我想通过它的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设置值时，watch和observer函数(除了'ssssobserver')在初始化时被调用。

对card-id属性的后续更改不会触发手表或观察者代码。

我需要做什么才能使它工作?

这里有很多事情会阻止它工作。我给出的主要建议是更好地学习Angular的使用习惯(也许是更多的教程)，并把jQuery的做事方式从你的脑海中清除掉。Angular为你提供了一个通过javascript完成几乎所有事情的路径，所以如果你发现自己在操纵DOM元素，请退一步，尝试不同的东西。

最明显的改进是使用Angular内置的消息传递工具，而不是试图通过操纵DOM来滚动你自己的工具。Angular为这些目的提供了$rootScope.$on、$rootScope.$broadcast和$rootScope.emit。

还有双向绑定的概念，这是不可能的替换，因为你已经尝试在你的plunkr。我已经分叉了另一个，并使其正常工作，所以看看你可以如何做不同的。

http://plnkr.co/edit/eqZQ0iptzKAInEYxEyLp?p =

预览

这绝不是"理想的"代码——只是功能性的。继续努力学习工具集，你就会很好。

相关文章：