share with share click для другого щелчка

Question

Предположим, у меня есть две ссылки, использующие AngularJS ng-click, они оба имеют одинаковое событие 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)" 

Тогда мой нг-клик будет просто:

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

Answer 1

Вы можете добавить функцию в контроллере и использовать его на атрибуте нг-клик, например:

<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

Markup:

<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 
    } 
})