AngularJS - directive not triggering after model update

Question

AngularJS - directive not triggering after model update

I have calendar app. After initialization everything is working correctly. The problem is after I change my model (month), the directive is not updating for newly created elements.

The view part:

<li class="day" ng-repeat="n in [] | range:month.daysInMonth()">    
    <span class="day-number" calendar-day="{{ n }}-{{ month.format('MM-YYYY') }}">{{ n }}</span>
</li>

The directive:

directive('calendarDay', ['month', function (month) {
    return function (scope, element, attrs) {
       scope.$watch(month, function (value) {
           var currentDate = moment(attrs.calendarDay, "DD-MM-YYYY");
           element.text(currentDate.format('DD-MM-YYYY'));
       });

    };
}]);

The model month is a model declared in app as:

value('month', moment());

Here is the code: http://jsfiddle.net/EEVGG/11/

As you cen see, the month and year part of the code is not changing, while it should because the value in calendar-day attribute is correct.

javascript
angularjs

Answer 1

You want to watch for changes on the scope property 'month' and not the month object you defined on the module. To do that, change the watchExpression to 'month' (String):

scope.$watch('month', function (value) {
    var currentDate = moment(attrs.calendarDay, "DD-MM-YYYY");
    element.text(currentDate.format('DD-MM-YYYY'));
}, true);

Also set the watcher to compare changes based on object equality (last argument of $watch) because your month object will be the same, only some properties will change. For more information on this check $watch documentation.

jsfiddle: http://jsfiddle.net/bmleite/EEVGG/12/