Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 475
Łukasz Wojciechowski Avatar asked Jan 14 '23 01:01

Łukasz Wojciechowski


1 Answers

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/

like image 126
bmleite Avatar answered Jan 17 '23 15:01

bmleite