为 ng-click 创建单个自定义指令以执行多个控制器功能 [英] Creating single custom directive for ng-click to perform multiple controller function

问题描述

我有以下代码:

...<div class="glyphicon glyphicon-filter ng-click="vm.add()" tabindex="1"><a href='' tabindex="2"><img id="touch" ng-click="vm.multiply(xyz)"src="/ui/assets/images/xxx.png"/></a><div class="glyphicon glyphicon-filter"ng-click="vm.showId()" tabindex="1" title="过滤器">
..

我想创建一个自定义的单个 ng-click 指令作为其推荐的 div(ng-click 仅用于按钮).我想知道是否有任何方法可以为所有 3 个 ng-click 创建单个指令，并在 $apply 的链接中调用这 3 个不同的函数?

解决方案

给你:http://jsfiddle.net/psevypcs/2/

HTML

test
<div clicky="test2()">test2</div>

AngularJS 控制器

$scope.test = function(){警报('你好');};$scope.test2 = function(){警报('hy2')；};

AngularJS 指令

angular.module('myApp').directive('clicky', Clicky);功能点击(){返回 {限制:'A'，范围: {clicky: '&'//把自己当作变量},链接:功能(范围，元素，属性){$(element).on('click', function(e) {范围.clicky();});}};}

I have the following code:

<div>...
    <div class="glyphicon glyphicon-filter ng-click="vm.add()" tabindex="1">
    <a href='' tabindex="2"><img id="touch" ng-click="vm.multiply(xyz)" 
    src="/ui/assets/images/xxx.png"/></a> 
    <div class="glyphicon glyphicon-filter"ng-click="vm.showId()" tabindex="1" title="Filter">
    </div>
..</div>  

I want to create a custom single ng-click directive as its recommended for div (ng-click to be used for only buttons). I want to know if there is any way I can create a single directive for all 3 ng-click and call those 3 different functions in link at $apply?

解决方案

Here you go: http://jsfiddle.net/psevypcs/2/

HTML

<div clicky="test()">test</div>
<div clicky="test2()">test2</div>

AngularJS-Controller

$scope.test = function(){
       alert('hy');
   };


$scope.test2 = function(){
       alert('hy2');
   };

AngularJS-Directive

angular.module('myApp')
        .directive('clicky', Clicky);

    function Clicky() {
        return {
            restrict: 'A',
            scope: {
                clicky: '&'  // Take yourself as variable
            },
            link: function(scope, element, attrs){
               $(element).on('click', function(e) {
                  scope.clicky();
               });
            }
      };
    }

这篇关于为 ng-click 创建单个自定义指令以执行多个控制器功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！