Angular directive, detect change with ng-model

Question

I'm using AngularJS 1.2

I'm passing an array via ng-model into a custom directive.

The data is in the directive when it is loaded, but when changes are made to the model in the main controller, the model in the directive isn't updating.

This is the relative partial my controller uses. (not the directive controller) ui.pct is an array of percentages.

<dprogress ng-model="ui.pct"></dprogress>

Here's the directive: ``` angular.module('dprogress', []) .directive('dprogress', function () {

function makeChart(data) {
  var chart = d3.select('#chart')
    .append("div").attr("class", "chart")
    .selectAll('div')
    .data(data)
    .enter()
    .append("div")
    .style("width", function(d) { return d + "%"; })
    .text(function(d) { return d + "%"; });
}

return {
  restrict: 'E',
  scope: { data: "=ngModel" },
  template: '<div id="chart"></div>',
  link: function (scope, element, attrs) {
    makeChart(scope.data);
  }
};

}); ```

I've added scope.$watch('data') in the link, but it would not trigger when the data was being changed from outside the directive.

How can I update the data in my directive when it is changed from outside?

apairet · Accepted Answer · 2014-08-10 10:51:05Z

2

Your data is probably an array and you need to deepwatch it. A simple watch will check if the reference is changed bu no the content.

link: function (scope, element, attrs) {
  makeChart(scope.data);
  scope.$watch('data', makeChart, true); // last arg is for deepwatch
}

answered Aug 10, 2014 at 10:51

apairet

3,16224 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Miraage · Accepted Answer · 2014-08-10 11:46:49Z

0

When objectEquality == true, inequality of the watchExpression is determined according to the angular.equals function. To save the value of the object for later comparison, the angular.copy function is used. This therefore means that watching complex objects will have adverse memory and performance implications.

scope.$watch('data', yourCallback, true);

edited Aug 10, 2014 at 11:46

answered Aug 10, 2014 at 9:14

Miraage

3,4943 gold badges28 silver badges43 bronze badges

1 Comment

Vikram Over a year ago

Please add some context to your answer.

Collectives™ on Stack Overflow

Angular directive, detect change with ng-model

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related