角 - 指令範圍內的函數被調用時，它不應該

Question

嗨，我掙扎了以下內容：

http://jsfiddle.net/uqZrB/9/

HTML

<div ng-controller="MyController"> 
    <p>Button Clicked {{ClickCount}} Times </p> 
    <my-clicker on-click="ButtonClicked($event)"> 
    </my-clicker> 
</div> 

JS

var MyApp = angular.module('MyApp',[]); 

MyApp.directive('myClicker', function() { 

    return { 

      restrict: 'E', 
      scope: { 
       onClick: "=" 
      }, 
      link: function($scope, element, attrs) {        

       var button = angular.element("<button>Click Me</button>"); 
       button.bind("mousedown", $scope.onClick);     
       element.append(button); 

      } 
     }; 

}); 

MyApp.controller("MyController", function ($scope) { 
    $scope.ButtonClicked = function($event) { 
     $scope.ClickCount++; 
    }; 
    $scope.ClickCount = 0; 
}); 

（使用angular1.2 rc：https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js）

自定義指令「myClicker」應該插入一個按鈕進入標籤，它的鼠標按下事件綁定到該指令範圍內提供的功能...

即我可以從控制器傳遞一個函數，在按鈕被點擊時執行。

正如你所看到的，當你運行小提琴時，綁定事件在加載時運行11次，即在按鈕事件被點擊之前。

運行11次會導致「10 $ digest（）迭代到達中止！」錯誤。

然後，當我點擊按鈕時，我得到「無法調用未定義的方法」調用，就好像該方法未在範圍中聲明一樣。

1. 爲什麼角度嘗試和運行加載方法？

2. 爲什麼「onClick」方法在範圍中不可用？

我想我誤解了有關指令的隔離範圍。

在此先感謝！

Answer 1

您的scope定義中的onClick: "="需要雙向數據綁定，請使用onClick: "&"將可執行表達式綁定到隔離範圍。 http://docs.angularjs.org/guide/directive

Answer 2

請改變控制器代碼如下

var MyApp = angular.module('MyApp',[]); 

MyApp.directive('myClicker', function() { 

return { 

     restrict: 'E', 
     scope: { 
      onClick: "&" 
     }, 
     link: function($scope, element, attrs) {        

      var button = angular.element("<button>Click Me</button>"); 
      button.bind("mousedown", $scope.onClick);     
      element.append(button); 

     } 
    }; 

}); 

MyApp.controller("MyController", function ($scope) { 
$scope.ButtonClicked = function($event) {   
    $scope.ClickCount++; 
}; 
$scope.ClickCount = 0; 
});