Question

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

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（）迭代达到。中止！”错误。

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

为什么angular尝试在加载时运行该方法？
为什么“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;
});

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

2 个答案: