有沒有辦法將多個函數傳遞給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指令？

回答

相關問題