javascript - Angular : watch/observe attribute change

Question

我想通过它的 id 更新元素的属性，并让元素对此变化使用react。

我试图创建一个 plunkr以反射(reflect)我的情况，但我似乎无法让 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 或观察者代码。

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

Answer 1

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

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

还有双向绑定(bind)的概念，正如您在 plunkr 中尝试过的那样，这对于替换是不可能的。我已经 fork 了另一个并让它工作，所以看看你如何以不同的方式做它。

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

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