Angularjs指令双方向バインディングはhtmlを更新しません

Question

私はカレンダー指令を作成しました。私の意図は、「変更」ボタンを押してカレンダーの日付を更新するときです。スコープを調べると、calendarDateが更新されますが、マークアップでは同じままです。どのようなアイデアを私は間違って何ですか？このコンポーネントが使用されている

<div class="container-fluid calendar-component"> 
<div class="row"> 
    <div class="col-md-12 text-center calendar-month"> 
     <span> {{calendarDate}} </span> 
    </div> 
</div> 
<div class="row calendar-day"> 
    <div class="col-md-12 text-center"> <a class="change"">Change </a></div> 
    <div class="col-md-12 text-center day-number">{{calendarDate | date: 'dd'}}</div> 
    <div class="col-md-12 text-center day-name">{{calendarDate | date: 'EEEE'}}</div> 
</div> 

var DailyTimekeeping = TimekeepingsApp.controller('DailyTimekeeping', [ 
    '$scope', 'UserService', '$http', function($scope, UserService, $http) { 
     var self = this; 
     self.currentDate = new Date(); 
     $scope.init = function(userId) { 
      self.currentDate = new Date(); 
     } 

    } ]); 

var calendar = TimekeepingsApp.directive('calendar', ['$timeout', function($timeout) { 
return { 
    restrict : 'E', 
    scope : { 
     calendarDate : '=date' 
    }, 
    templateUrl : 'angular/calendar.html', 
    link: function (scope, element, attrs) { 
     scope.$watch('calendarDate', function() { 
      element.on('click', '.change' ,function (e) { 
        alert('Test'); 
        scope.calendarDate.setDate(10); 
       }); 
     }); 

    } 
}; 

そしてcalendar.html：ここ はコードです

calendar date="dailyTimekeeping.currentDate">

Answer 1

あなたの問題はelement.onにすぎないということですコールバックをrに配線するイベントが発生するとunを返します。あなたのコールバックはAngularの振る舞いの通常のスキームの外で発生するので、（digest cycleと呼ばれるものを通して）スコープ変数が変更されたことを知る方法がありません。

それはあなたのコードの実行後にダイジェストを実行するように角度教えてくれるようあなたは、scope.$apply(...)コールの内部で更新コードを置くことによってこの問題を解決することができます：私はここに任意のコードが表示されない

... 
element.on('click', '.change' ,function (e) { 
    alert('Test'); 
    scope.$apply(function() { 
     scope.calendarDate.setDate(10); 
    }); 
}); 
...