Question

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

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

Answer 1

您可以使用范围的=对象表示法来接受可以分配给指令的具有属性的对象数组。

<强> 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>

Answer 2

将任何形式的函数传递给指令，这些指令在这些指令中执行相同的操作，从指令执行函数，该方法应如下所示

首先使用返回范围来包含functionName：＆＃39;＆amp;＆＃39;因为它用于传递函数
然后返回它应该看起来像你的模板ng-click =＆＃39; functionName（{params：values [，params2：value2]}）＆＃39;

因为上面会将param作为参数发送给调用指令

＆＃13;

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){
  
});*/

＆＃13;

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

＆＃13;

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

2 个答案: