AngularJS: изменение атрибута watch/observ

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'); 
     } 
    } 
}); 

часы и функция наблюдателя (за исключением «ssssobserver») дозвонился на intialization, когда я установить значение с помощью нг-повтора.

Последующие изменения атрибута идентификатора карты не вызывают код часов или наблюдателя.

Что мне нужно сделать, чтобы это сработало?

Answer 1

Здесь есть много вещей, которые мешают этому работать. Главный совет, который я бы дал, - лучше изучить привычки Angular (возможно, еще несколько уроков) и отпечатать способ jQuery делать из вашего ума. Угловой дает вам путь, чтобы делать почти все через javascript, поэтому, если вы обнаружите, что манипулируете элементами DOM, сделайте шаг назад и попробуйте что-то другое.

Наиболее очевидным улучшением было бы использовать встроенные средства обмена сообщениями Angular, а не пытаться катиться самостоятельно, манипулируя DOM. Угловой обеспечивает $rootScope.$on, $rootScope.$broadcast и $rootScope.emit для этих целей.

Существует также понятие двустороннего связывания, которое невозможно с заменой, как вы пытались в своем plunkr. Я разветвил еще один и заработал, так что посмотрите, как вы можете делать это по-другому.

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

Это отнюдь не "идеальный" код - просто функциональны. Продолжайте изучать набор инструментов, и все будет хорошо.