Angularjs 指令范围内的Angular-函数在不应'；T

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

HTML

按钮点击{{ClickCount}}次

JS

var MyApp=angular.module（'MyApp'，[]）；
MyApp.directive（'myClicker'，function（）{
返回{
限制：'E'，
范围：{
onClick:“=”
},
链接：函数（$scope，element，attrs）{
var按钮=angular.element（“单击我”）；
bind（“mousedown”，$scope.onClick）；
元素。追加（按钮）；
}
};
});
控制器（“MyController”，函数（$scope）{
$scope.ButtonClicked=函数（$event）{
$scope.ClickCount++；
};
$scope.ClickCount=0；
});

（使用angular1.2 rc:）

自定义指令“myClicker”应在标记中插入一个按钮，并将其mousedown事件绑定到指令范围中提供的函数

也就是说，我可以从控制器传递a函数，以便在单击按钮时执行

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

运行11次会导致“10$digest（）迭代已达到。正在中止！”错误

然后，当我单击按钮时，我得到“cannotcallmethod'call'ofundefined”，就好像该方法没有在作用域中声明一样

为什么angular会尝试在加载时运行该方法

为什么“onClick”方法在范围中不可用

我想我对该指令的孤立范围有些误解

---

提前谢谢

在您的

范围

定义中的

onClick:“=”

需要双向数据绑定，请使用

onClick:“&”

将可执行表达式绑定到一个隔离范围中

在您的

范围

定义中的

onClick:“=”

需要双向数据绑定，请使用

onClick:“&”

将可执行表达式绑定到一个隔离范围中

请按以下方式更改控制器中的代码

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

var MyApp=angular.module（'MyApp'，[]）；
MyApp.directive（'myClicker'，function（）{
返回{
限制：'E'，
范围：{
onClick:“&”
},
链接：函数（$scope，element，attrs）{
var按钮=angular.element（“单击我”）；
bind（“mousedown”，$scope.onClick）；
元素。追加（按钮）；
}
};
});
控制器（“MyController”，函数（$scope）{
$scope.ButtonClicked=函数（$event）{
$scope.ClickCount++；
};
$scope.ClickCount=0；
});

请按以下方式更改控制器中的代码

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

var MyApp=angular.module（'MyApp'，[]）；
MyApp.directive（'myClicker'，function（）{
返回{
限制：'E'，
范围：{
onClick:“&”
},
链接：函数（$scope，element，attrs）{
var按钮=angular.element（“单击我”）；
bind（“mousedown”，$scope.onClick）；
元素。追加（按钮）；
}
};
});
控制器（“MyController”，函数（$scope）{
$scope.ButtonClicked=函数（$event）{
$scope.ClickCount++；
};
$scope.ClickCount=0；
});

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

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