I've recently developed a directive that utilizes d3 for rendering, with data being passed in through props like this:
<my-directive words="fromControllerData"></my-directive>
The "fromControllerData" can be modified by the parent component, and I'm looking for a way to trigger a re-render of my directive.
How can I effectively detect changes in the data?
I've come across various examples, but none seemed to work for me...
You can view the project via this link: https://plnkr.co/edit/I6eyFMBrhoDpxfOsulrI?p=preview
You will find the directive implementation in:
app.js // line 48
I have tried using both scope.$watch and scope.$watchCollection...
Here's a snippet from the controller:
app.controller('AppController', ['$scope', '$rootScope', 'serverData', function($scope, $rootScope, serverData) {
$scope.data = {
words: serverData
};
setTimeout(function() {
console.log('changed');
$scope.data.words = [];
}, 1000);
}]);
And here's some code from the directive:
app.directive("gravityWordCloud", ['serverData', function(serverData) {
return {
restrict: "EA",
scope: {
words: "="
},
link: function(scope, element, attrs) {
// irrelevant stuff
//this only works on initial load...
//subsequent updates are not detected
scope.$watchCollection('words', function() {
console.log(scope.words);
});
}
}
}])