Есть ли способ передать несколько функций директиве 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()" action2 =" action2() '. Вероятно, у вас не будет слишком много функций и сопоставьте их с директивой '&'. В противном случае передача массива (с '=') заставит вас итерации по массиву для анализа функций. – Mik378

Кажется, что чище передать один объект. Как получить доступ к функциям через '='? Это просто заканчивается тем, что обрабатывает все это как строку, и я не могу получить доступ к фактическим функциям. – elliottregan

Вы можете использовать = объект обозначения для сферы в принятии в массив объектов с свойства, которые вы можете назначить своей директиве.

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

Что делать, если действие принимает аргументы? –

Проверьте это [раздвоенный plunker] (http://plnkr.co/edit/GHFk4nm342XU2Q4sD1lC?p=preview) :) – ryeballar

спасибо, но я имею в виду в собственности действия: $ scope.items = [{ метка: «Пункт 1 ', action: action (arg) }, –

пройти любую форму функции директивы, которая делает то же самое в thesense IKE обратный звонок из директивы для выполнения функции, метод должен быть ниже

Прежде всего, использование область возврата должна содержать функциюName: '&', как она используется в передающих функциях
Затем возвращаемое обратно должно выглядеть так: ur template ng-click = 'functionName ({params: values [, params2: value2]}) '

как выше пошлет параметры в качестве аргумента вызывающего контроллера вызова директивы

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?

ответ

Смежные вопросы