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

【问题标题】：Angular - function inside directive scope gets called when it shouldn'tAngular - 指令范围内的函数在不应该被调用时被调用
【发布时间】：2013-10-15 11:38:11
【问题描述】：

您好，我正在努力解决以下问题：

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>

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 事件绑定到指令范围内提供的函数...

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

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

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

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

为什么 Angular 会在加载时尝试运行该方法？
为什么“onClick”方法在作用域中不可用？

我认为我误解了指令的隔离范围。

提前致谢！

【问题讨论】：

onClick: "=" 应该是 onClick: "&" 这是一个函数

标签： angularjs angularjs-directive angularjs-scope

【解决方案1】：

scope 定义中的 onClick: "=" 需要双向数据绑定，请使用 onClick: "&" 将可执行表达式绑定到隔离范围。 http://docs.angularjs.org/guide/directive

【讨论】：

【解决方案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;
});

【讨论】：