Угловое - функция внутри директивы рамки вызывается, когда он не должен

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

(используя угловое значение1.2 rc: https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js)

Обычай директива «myClicker» следует вставить кнопку в теге, и связать его MouseDown событие к функции поставляемой в рамках директивы ...

Т.е. Я могу передать функцию из контроллера, чтобы выполнить ее при нажатии кнопки.

Как вы можете видеть, когда вы запускаете скрипку, связанное событие запускается 11 раз, при загрузке ... т. Е. До того, как нажата кнопка.

Запуск 11 раз приводит к завершению итераций 10 $ digest(). Отмена! " ошибка.

Затем, когда я нажимаю кнопку, я получаю вызов «Невозможно вызвать метод« вызов неопределенного », как если бы метод не был объявлен в области.

1. Почему угловая попытка и запуск метода при загрузке?

2. Почему метод «onClick» недоступен в области?

Я думаю, что я недопонимаю что-то о изолированном объеме директивы.

Заранее благодарен!

Answer 1

onClick: "=" в вашем определении scope предполагает двухстороннюю привязку данных, используйте 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; 
});