在更新自定義指令控制器中的$ scope時，Angular.js雙向綁定不起作用？

Question

我在寫一組可以互相聯繫的指令時遇到了這個問題。

這裏是CodePen網址：http://codepen.io/jennieji/pen/mDGuw

這裏是JS代碼：

angular.module('app', []) 
.directive('testDirective', function() { 
    return { 
    controller: function($scope){ 
     $scope.now = 0; 

     this.update = function() { 
     $scope.now++; 
     }; 
    }, 
    link: function(scope) { 
     scope.$watch(function(){ 
     return scope.now; 
     }, function(newVal, oldVal) { 
     element.append('<p>[LOG] $watch now:' + newVal + '</p>'); 
     }, true); 
     scope.$watch('now', function(newVal, oldVal) { 
     element.append('<p>[LOG] $watch now:' + newVal + '</p>'); 
     }); 
    } 
    }; 
}) 
.directive('testUpdate', function() { 
    return { 
    require: '^testDirective', 
    link: function(scope, element, attr, ctrl) { 
     element.on('click', function(){ 
     ctrl.update(); 
     element.after('<p>[LOG] click now:' + scope.now + '</p>'); 
     }); 
    } 
    } 
}); 

這裏是HTML：

<div ng-app="app"> 
    <div test-directive> 
    <p>{{ now }}</p> 
    <button test-update>Update now</button> 
    </div> 
<div> 

Answer 1

既然你正在聽的DOM click事件：

element.on('click', function(){

除非你 $apply他們層

你的範圍的變化將不會生效：

link: function(scope, element, attr, ctrl) { 
     element.on('click', function(){ 

     scope.$apply(function() { 
      ctrl.update(); 
     }); 
     ctrl.update(); 
     element.after('<p>[LOG] click now:' + scope.now + '</p>'); 

     }); 
    } 

$apply揭開序幕的角度$digest循環，確實爲雙向綁定髒檢查。