角度指令在点击事件上调用范围方法

Question

我有一个带有 k-grid-cancel-changes 类的按钮的网格。我想创建一个指令，将单击事件附加到该按钮并在页面范围内调用方法

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

请注意，angular 的jqLite 没有element.click 功能。

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