javascript - AngularJS - 模型更新后指令未触发

Question

我有日历应用程序。初始化后一切正常。问题是在我更改模型（月份）之后，该指令不会针对新创建的元素进行更新。

视图部分：

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

指令：

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'));
       });

    };
}]);

该模型month是在应用程序中声明的模型：

value('month', moment());

这是代码：http: //jsfiddle.net/EEVGG/11/

如您所见，代码的月份和年份部分没有变化，而应该是因为calendar-day属性中的值是正确的。

Answer 1

您想观察范围属性“月份”的变化，而不是您在模块上定义的月份对象。为此，请将watchExpression更改为'month'(String)：

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

还将观察者设置为基于对象相等性（的最后一个参数$watch）比较更改，因为您的月份对象将相同，只有一些属性会更改。有关此检查的更多信息$watch 文档。

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