angularjs - Angular - 指令范围内的函数在不应该被调用时被调用

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”应该在标签中插入一个按钮，并将其 mousedown 事件绑定到指令范围内提供的函数...

即我可以从控制器传递一个函数，在单击按钮时执行。

如您所见，当您运行小提琴时，绑定事件在加载时运行 11 次......即在单击按钮事件之前。

运行 11 次会导致“达到 10 次 $digest() 迭代。中止！” 错误。

然后，当我单击按钮时，我得到“无法调用未定义的方法'调用'”，就好像该方法未在范围内声明一样。

1. 为什么 Angular 会在加载时尝试运行该方法？

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