AngularJS：观察/观察属性变化

Question

我想通过它的 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 属性的后续更改不会触发 watch 或 observer 代码。

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

Answer 1

这里发生了很多事情，阻止了它的工作。我要给出的主要建议是更好地学习 Angular 的习惯（也许更多的教程），并把 jQuery 的做事方式从你的脑海中剔除。 Angular 为您提供了通过 javascript 完成几乎所有事情的途径，因此，如果您发现自己在操作 DOM 元素，请退后一步尝试不同的方法。

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

还有 2-way binding 的概念，正如您在 plunkr 中尝试过的那样，无法通过替换来实现。我已经分叉了另一个并让它工作了，所以看看，看看你如何能以不同的方式做它。

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

这绝不是“理想”的代码——只是功能性的。继续努力学习工具集，你会没事的。