각도 - 지침 범위 내 기능이

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() iterations reached. Aborting!"이 발생합니다. 오류.

그런 다음 단추를 클릭 할 때 메소드가 범위에서 선언되지 않은 것처럼 "정의되지 않은 메소드 호출 '을 호출 할 수 없습니다.

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