Question

我想通过它的id来更新元素的属性，并让元素对此更改作出反应。

我尝试创建一个plunkr来反映我的情况，但在某些情况下我甚至无法点击工作。

但是，我想要做的是调用执行以下操作的函数

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设置值时，手表和观察者功能（＆＃39; ssssobserver＆＃39;除外）会被初始化调用。

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

我需要做些什么来实现这个目标？

Answer 1

这里有很多事情阻止这种情况发生。我给出的主要建议是更好地学习Angular的习惯（可能还有一些教程），并记下jQuery的做法。 Angular为您提供了通过javascript执行几乎所有操作的路径，因此如果您发现自己正在操纵DOM元素，请退一步尝试不同的事情。

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

还有双向绑定的概念，如你在plunkr中所尝试的那样，更换是不可能的。我已经分叉了另一个，并让它工作，所以看看，看看你可以做不同的方式。

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

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

AngularJS：观察/观察属性更改

1 个答案: