用于在click事件上调用scope方法的angular指令

Question

我有一个带有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');
            }

我很感激任何建议

Answer 1

如果你想调用范围内的函数，必须像这样提供：

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

演示：http://plnkr.co/edit/8vQ1wmdriGrDFGZwhqW2?p=preview

如果由于某种原因您无法修改HTML代码（例如，它由Kendo动态呈现）并且无法添加属性，那么您只能通过$parent范围引用来访问要调用的函数：

$scope.$parent.onCancelChanges();

演示：http://plnkr.co/edit/tpEEZs9VQunKXABud9yN?p=preview

最后，如果你的指令的隔离范围不是主体，那么你可以简单地调用函数，因为它是相同的范围：

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

演示：http://plnkr.co/edit/0OmlCJ6SgYU2GQRyBgYj?p=preview

Answer 2

您可以像这样创建指令：

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

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

});

或如果您需要，请使用controller函数代替link：

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

请注意，角度jqLite没有element.click功能。

这是小提琴： http://jsfiddle.net/cxo77xb4/2/