有没有办法将多个函数传递给AngularJS指令？

我正在构建一个下拉菜单指令，它允许您选择性地将一个函数附加到列表中的每个项目。我知道如何将每个属性的一个函数传递给指令，但我希望有一种方法可以传递多个函数。有没有办法将多个函数传递给AngularJS指令？

<dropdown items="['item1', 'item2']" actions="['action1()', 'action2()']"></dropdown>

或更好：

<dropdown items="[{'item1':action1()}, {'item2':action2()}]"></dropdown>

这可能被用来生成：

<dropdown items="['item1', 'item2']" actions="['action1()', 'action2()']"> 
    <a ng-click="action1()">item1</a> 
    <a ng-click="action2()">item2</a> 
</dropdown>

来源

2014-10-05 elliottregan

为什么不'动作1 = “动作1（）” 动作2 =“1动作（）'。你可能不会有太多的函数，并用指令中的＆映射它们。否则，传递数组（使用'='）将强制您迭代数组以解析函数。 – Mik378 2014-10-05 01:15:57

传入一个对象似乎更清晰。我如何通过'='访问函数？它只是最终将整个事件视为一个字符串，而我无法访问实际的功能。 – elliottregan 2014-10-05 01:25:08

您可以接受的数组对象与使用=对象符号为您范围属性，您可以分配给您的指令。

DEMO

控制器

.controller('Ctrl', function($scope) { 

    var action = function() { 
     window.alert(this.label); 
    }; 

    $scope.items = [{ 
     label: 'Item 1', 
     action: action 
    }, { 
     label: 'Item 2', 
     action: action 
    }, { 
     label: 'Item 3', 
     action: action 
    }, { 
     label: 'Item 4', 
     action: action 
    }]; 
    })

指令

.directive('dropdown', function() { 
    return { 
     restrict: 'E', 
     scope: { 
     items: '=' 
     }, 
     template: 
     '<div ng-repeat="item in items track by $index" ng-click="item.action()">' + 
      '<a ng-bind="item.label"></a>' + 
     '</div>' 
    }; 
    });

的index.html

<body ng-controller="Ctrl"> 
    <dropdown items="items"></dropdown> 
    </body>

来源

2014-10-05 02:50:22 ryeballar

如果行动需要论证会怎么样？ – 2015-04-06 09:50:26

检查这[分叉plunker]（http://plnkr.co/edit/GHFk4nm342XU2Q4sD1lC?p=preview）:) – ryeballar 2015-04-06 09:53:54

谢谢，但我的意思是在行动中的财产： $ scope.items = [{0} {0} {0} {项目1 '， action：action（arg） }， – 2015-04-06 09:57:45

任何形式的功能传递给做同样的事情在thesense IKE从指示回调执行功能的指令，该方法应该如下

全部使用第一返回范围包含functionName：'&'，因为它用于传递函数
然后返回它应该看起来像这样从你的模板ng-click ='functionName（{params：values [，params2：value2]} ）'

如上述将发送PARAM作为参数传递给呼叫控制器调用指令

var app = angular.module('testApp', []); 
 

 
app.controller('MainCtrl', function($scope) { 
 
    $scope.name = 'World'; 
 
    
 
    $scope.items=['value1','value2','value3']; 
 
    $scope.items2=['value12','value22','value32']; 
 
    
 
    $scope.clicked=''; 
 
    
 
    $scope.alert=function(val){ 
 
    $scope.clicked=val; 
 
    } 
 
    
 
    $scope.alerti=function(val){ 
 
    $scope.clicked=val+"-Second"; 
 
    } 
 
    
 
}); 
 

 
app.directive('direct', function(){ 
 
    return { 
 
     restrict: 'E', 
 
     scope : { 
 
      actionTest:'&', 
 
      tests:'=' 
 
     }, 
 
     // controller: 'ctrl', 
 
     template: '<ul><li ng-repeat="test in tests" ng-click="actionTest({val:test})">{{test}} </li></ul>' 
 
    } 
 
}); 
 
/* 
 
app.controller('ctrl', function($scope){ 
 
    
 
});*/

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="testApp"> 
 
<div ng-controller="MainCtrl"> 
 
    <p>Hello {{name}}!</p> 
 
    <p>CLicked : {{clicked}}</p> 
 
    
 
    <direct tests='items' action-test='alert(val)'></direct> 
 
    
 
    <!--with a different action function--> 
 
    <direct tests='items2' action-test='alerti(val)'></direct> 
 
    
 
    </div> 
 
</div>

来源

2016-07-27 10:42:06

有没有办法将多个函数传递给AngularJS指令？

回答

相关问题