4

カレンダーアプリがあります。初期化後、すべてが正しく機能しています。問題は、モデル (月) を変更した後、新しく作成された要素に対してディレクティブが更新されないことです。

ビュー部分:

<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属性の値が正しいため変更されるはずです。

4

1 に答える 1

9

モジュールで定義した月オブジェクトではなく、スコープ プロパティ「月」の変更を監視する必要があります。これを行うには、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 documentationを確認してください。

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

于 2013-03-01T14:40:16.803 に答える