Question

假设我使用AngularJS ng-click有两个链接，它们在点击事件上都有相同的范围变量。

ui.myclick(myVar1, myVar2, myVar3)

<a ng-click="ui.myclick(myVar1, myVar2, myVar3)">link1</a>

<a ng-click="ui.myclick(myVar1, myVar2, myVar3)">link2</a>

是否可以在HTML中的某处定义点击处理程序，以便我可以重复使用它？像这样：

ng-init="var commonclick = ui.myclick(myVar1, myVar2, myVar3)"

然后我的ng-click就是：

<a ng-click="commonclick">Link1</a>
<a ng-click="commonclick">Link2</a>

Answer 1

您可以在控制器中添加该功能，并在ng-click属性上使用它，如下所示：

<div ng-controller="MyCtrl as m">
    <a ng-click="m.f(arg)">Link 1</a>
    <a ng-click="m.f(arg)">Link 2</a>
</div>
<script>
    angular
        .module('app', [])
        .controller('MyCtrl', ['$scope', function($scope) {
            $scope.f = function(arg) {
                console.log(arg);
            }
        }])
    ;
</script>

Answer 2

不，你不能按照你想要的方式去做。阻碍的是，您无法使用bind方法或function来创建ngInit中的函数。但是至少有两种我能想到的解决方法。

<强> 1。辅助工厂在控制器中。

<div ng-init="commonclick = createFunction(ui.myclick, myVar1, myVar2, myVar3)">...</div>

其中createFunction在控制器中定义为：

$scope.createFunction = function(fn) {
    var args = [].slice.call(arguments, 1);
    return function() {
        return fn.apply(null, args);
    };
};

然后您就可以使用commonclick作为

<a ng-click="commonclick()">Link1</a>
<a ng-click="commonclick()">Link2</a>

<强>＃2。活动代表团。在某些情况下，您可以从onclick甚至冒泡中受益。在这种情况下，您只需将一个ngClick指令附加到父元素，它将处理所有子事件：

<div ng-click="ui.myclick(myVar1, myVar2, myVar3)">
    <a>Link1</a>
    <a>Link2</a>
</div>

Answer 3

如果您的目标是让您的标记尽可能干净，则可以将ng-click设置为使用和ng-repeat

的组合。

<强>标记：

<a ng-repeat="link in links" ng-click="clickFunction(link)">{{link}}</a>

<强>控制器：

.controller('Main Controller', function($scope) {
    $scope.links = ['Link1', 'Link2']; //define links

    $scope.clickFunction = function(value) {
        //define what clickFunction does
    }
})

角点击事件共享到其他点击

3 个答案: