gpt4 book ai didi

javascript - Angular Directive(指令)在点击事件上调用范围方法

转载 作者:行者123 更新时间:2023-11-30 17:14:20 25 4
gpt4 key购买 nike

我有一个带有按钮的网格,该按钮具有 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');
}

如果有任何建议,我将不胜感激

最佳答案

如果你想在范围内调用一个函数,它必须像这样提供:

<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

关于javascript - Angular Directive(指令)在点击事件上调用范围方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26402520/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com