Javascript 单击事件时调用作用域方法的angular指令

我有一个带有按钮的网格，它有k-grid-cancel-changes类。我想创建一个指令，将click事件附加到页面作用域上的按钮和调用方法

    .directive('kGridCancelChanges', function () { 
               return {
                restrict: 'C',                
                scope: {
                    onCancelChanges: "&"
                },
                controller: function ($scope, $element, $attrs, $location) {
                    $element.click(function () {
                        $scope.onCancelChanges();
                    });
                }

            }
});

当我按下按钮时，我可以看到$scope.onCancelChanges（）从我的指令中被激发，但它从未到达页面作用域上的函数

 $scope.onCancelChanges = function () {
               alert('test');
            }

---

如果您想在必须提供的范围内调用函数，请提供以下建议，我将不胜感激：

<button class="k-grid-cancel-changes" on-cancel-changes="onCancelChanges()">test</button>

app.directive('myDir', function () {

    return {
        restrict: 'C',
        scope: {
            foo: '&'
        },
        link: function(scope,elem){
            elem.on('click',function(){
               scope.foo(); 
            });
        }};

});

演示： 最后，如果指令的独立作用域不是主要的，那么您可以简单地调用函数，因为它是相同的作用域：

.directive('kGridCancelChanges', function() {
    return {
        restrict: 'C',
        controller: function($scope, $element, $attrs, $location) {
            $element.click(function() {
                $scope.onCancelChanges();
            });
        }
    }
});

---

演示：您可以创建如下指令：

<button class="k-grid-cancel-changes" on-cancel-changes="onCancelChanges()">test</button>

app.directive('myDir', function () {

    return {
        restrict: 'C',
        scope: {
            foo: '&'
        },
        link: function(scope,elem){
            elem.on('click',function(){
               scope.foo(); 
            });
        }};

});

或使用

控制器

功能，而不是

链接

，如果需要：

    controller: function($scope,$element){
        $element.on('click',function(){
           $scope.foo(); 
        });
    }};

注意angular的

jqLite

没有

元素。单击
函数

这是小提琴：
您是否尝试使用
$apply
？还可以尝试在
链接中绑定事件
函数是的，我已经尝试过：$scope.onCancelChanges（）$作用域：$apply（）；创建一个复制问题的演示我认为应该在
link
functionHi，$scope.$parent.onCancelChanges（）中进行；似乎有效，但我认为使用$parent是一种糟糕的做法？是的，我会避免使用
$parent
。只是向你解释你的选择。我会选择#1或#3。我已经删除了孤立的作用域，它终于开始工作了。非常感谢。在这种情况下为什么我应该使用隔离作用域？如果您只需要创建一个事件处理程序，那么您不需要隔离作用域。如果您要创建一些作用域变量，您会使用它。是的，在您的情况下，您最好使用
link
函数，这是我们通常将事件处理程序绑定到DOM的地方。谢谢，这是一个很好的示例。我相信我会在将来使用它，但在这种情况下，我不能修改html@witpo您不必修改html。只需将
foo
更改为
onCancelChanges