$watch'ing for data changes in an Angular directive
Solution 1
You need to enable deep object dirty checking. By default angular only checks the reference of the top level variable that you watch.
App.directive('d3Visualization', function() {
return {
restrict: 'E',
scope: {
val: '='
},
link: function(scope, element, attrs) {
scope.$watch('val', function(newValue, oldValue) {
if (newValue)
console.log("I see a data change!");
}, true);
}
}
});
see Scope. The third parameter of the $watch function enables deep dirty checking if it's set to true.
Take note that deep dirty checking is expensive. So if you just need to watch the children array instead of the whole data
variable the watch the variable directly.
scope.$watch('val.children', function(newValue, oldValue) {}, true);
version 1.2.x introduced $watchCollection
Shallow watches the properties of an object and fires whenever any of the properties change (for arrays, this implies watching the array items; for object maps, this implies watching the properties)
scope.$watchCollection('val.children', function(newValue, oldValue) {});
Solution 2
Because if you want to trigger your data with deep of it,you have to pass 3th argument true
of your listener.By default it's false
and it meens that you function will trigger,only when your variable will change not it's field.
Solution 3
My version for a directive that uses jqplot to plot the data once it becomes available:
app.directive('lineChart', function() {
$.jqplot.config.enablePlugins = true;
return function(scope, element, attrs) {
scope.$watch(attrs.lineChart, function(newValue, oldValue) {
if (newValue) {
// alert(scope.$eval(attrs.lineChart));
var plot = $.jqplot(element[0].id, scope.$eval(attrs.lineChart), scope.$eval(attrs.options));
}
});
}
});
Nicholas Pappas
I have been working in the field of Usability, Human Factors, and Ergonomics for over 20 years.
Updated on August 25, 2022Comments
-
Nicholas Pappas almost 2 years
How can I trigger a
$watch
variable in an Angular directive when manipulating the data inside (e.g., inserting or removing data), but not assign a new object to that variable?I have a simple dataset currently being loaded from a JSON file. My Angular controller does this, as well as define a few functions:
App.controller('AppCtrl', function AppCtrl($scope, JsonService) { // load the initial data model if (!$scope.data) { JsonService.getData(function(data) { $scope.data = data; $scope.records = data.children.length; }); } else { console.log("I have data already... " + $scope.data); } // adds a resource to the 'data' object $scope.add = function() { $scope.data.children.push({ "name": "!Insert This!" }); }; // removes the resource from the 'data' object $scope.remove = function(resource) { console.log("I'm going to remove this!"); console.log(resource); }; $scope.highlight = function() { }; });
I have a
<button>
that properly called the$scope.add
function, and the new object is properly inserted into the$scope.data
set. A table I have set up does update each time I hit the "add" button.<table class="table table-striped table-condensed"> <tbody> <tr ng-repeat="child in data.children | filter:search | orderBy:'name'"> <td><input type="checkbox"></td> <td>{{child.name}}</td> <td><button class="btn btn-small" ng-click="remove(child)" ng-mouseover="highlight()"><i class="icon-remove-sign"></i> remove</button></td> </tr> </tbody> </table>
However, a directive I set set up to watch
$scope.data
is not being fired when all this happens.I define my tag in HTML:
<d3-visualization val="data"></d3-visualization>
Which is associated with the following directive (trimmed for question sanity):
App.directive('d3Visualization', function() { return { restrict: 'E', scope: { val: '=' }, link: function(scope, element, attrs) { scope.$watch('val', function(newValue, oldValue) { if (newValue) console.log("I see a data change!"); }); } } });
I get the
"I see a data change!"
message at the very beginning, but never after as I hit the "add" button.How can I trigger the
$watch
event when I'm just adding/removing objects from thedata
object, not getting a whole new dataset to assign to thedata
object? -
Liviu T. over 11 yearsGlad to help. Keep experimenting with the $watch function as the expressions it can watch are quite varied.
-
Alex Arvanitidis about 9 yearsIt's a pity I can't upvote more than once.. I would give you a bounty, for the 2h I lost looking for that.
-
victorhazbun over 8 yearsis there any alternative different than $watch to "watch" for changes? PLEASE LET ME KNOW.
-
snowYetis about 8 yearsi believe the restrictions should be, "EA".
-
Richard Dunn almost 7 years$watchCollection was the answer I needed. Cheers!