AngularJS：观察/监听属性变化

Question

AngularJS：观察/监听属性变化

3

我希望通过元素的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属性的后续更改不会触发手表或观察器代码。

我需要做什么才能让它正常工作？

- Wonko

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tyler · Accepted Answer

这里有很多事情阻止了它的工作。我主要的建议是更好地学习Angular的习惯（也许需要更多的教程），并将jQuery的做法从你的头脑中清除出去。Angular提供了一条通过javascript几乎可以完成所有事情的路径，因此如果发现自己正在操作DOM元素，请退后一步尝试其他方法。

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

还有双向绑定的概念，在你尝试在plunkr中进行替换时是不可能的。我已经分支了另一个并使其运行起来了，所以看看你可以如何以不同的方式实现它。

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

这并不是“理想”的代码 - 只是功能性的。继续努力学习工具集，你会做得很好。