AngularJS: changing clock / watch attribute
I want to update an attribute of an element via its id and edit the element for this change.
I tried to create a plunkr to reflect my situation, but there I can't get even ng-click to work.
However, what I want to do is call a function that does the following
var cell = angular.element(document.querySelector('#' + cellName));
cell.attr('card-id', id);
This seems to work, according to the values, which I can re-read directly after these lines.
the receiving element looks like this:
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');
}
}
});
watch and observer functions (except for "ssssobserver") are called on initialization when I set values via ng-repeat.
Subsequent changes to the card-id attribute do not trigger the watch or watcher code.
What do I need to do to make this work?
source to share
There are many things here that prevent this from working. The top tip I would give is to learn Angular habits better (maybe a few more tutorials) and churn out jQuery's way of doing things out of my head. Angular gives you a way to do almost everything via javascript, so if you find yourself manipulating DOM elements, take a step back and try something different.
The most obvious improvement would be to use Angular's built-in messaging facilities rather than trying to roll your own by manipulating the DOM. Angular provides $rootScope.$on
, $rootScope.$broadcast
and $rootScope.emit
for these purposes.
There is also the notion of two-way binding, which is not possible with replacement like you tried in your plunkr. I forked another one and it worked, so see how you can do it differently.
http://plnkr.co/edit/eqZQ0iptzKAInEYxEyLp?p=preview
This is by no means "perfect" code - just functional code. Keep exploring the toolbox and you'll be fine.
source to share