Question

我有一个无序列表，其动作是动态决定的。

指令

 function controller($scope, paymentService, $modal) {
       var vm = this;
       vm.attachFile = attachFile;
       vm.actions = data.actionData;

 function attachFile(title, icon, paymentId) {
    // My code
       }
    }

模板：

   <ul id="actionDropdownMenu" class="dropdown-menu" role="menu">
            <li ng-repeat="action in  vm.actions.data.actionList" title="{{    action.tip}}">
                <a href="#" ng-click="{{action.command}}">  @*this doesn't work*@
                    <span class="{{ action.icon }}"></span> {{ action.text}}
                </a>
            </li>
        </ul>

现在在我的数据中 action.command是动态填充的，如

 actionList = new List<Action>
                    {
                        new Action()
                        {
                    Command = string.Format("vm.attachFile('{0}', '{1}', {2}) ", tip, icon, id),
                    Icon = icon,
                    Text = text,
                    Tip = tip
                        }
                    };

同样我还有很多其他功能可以根据业务逻辑添加到列表中。现在在开发人员中，它正确地显示为ng-click =“vm.attachFile（'test，'test'，33），但没有在点击时调用该函数。有趣的是，如果我直接在我的模板中编写相同的函数，它就可以工作。

  <a href="#" ng-click="vm.attachFile('test,'test',33)>  @*this work*@

Answer 1

您可以创建一个自定义单击指令，该指令可以将字符串作为输入，并将其用作存储要调用的函数的对象的键访问器。称之为commandList。您可以将该列表附加到范围并在链接功能中调用它。不是最好的解释，所以这里是一些代码和工作插件

//js
var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {


  $scope.actions = [

    {
      text: "I speak to an alert boxy",
      command: "speak"
    },

     {
      text: "I whisper to the console",
      command: "whisper"
    },  

     {
      text: "I bring color",
      command: "color"
    }, 


  ];


});

app.directive('customClick', function(){

  return{

    link: function(scope, el, attrs){

      var fn = attrs['customClick'];

      el.on('click', function(){

         scope.commandList[fn]();

      });
    },
     controller : function($scope){



       var commandList = {};


       commandList.speak = function(){

         alert("Hello")
       };


       commandList.whisper = function(){

        console.log("Hello")
       };


       commandList.color = function(){
          document.body.style.background = "LightSkyBlue";
       };

       $scope.commandList = commandList;

     }

  }

})

// html
<body ng-controller="MainCtrl">
    <h2>custom  click on single elements</h2>

    <button class ="btn btn-info" custom-click="speak">speak</button>
    <hr />
    <button class= "btn btn-primary" custom-click="whisper">whisper</button>
      <hr />
    <button class= "btn btn-default" custom-click="color">Color</button>
    <br /> <br /><br /> <br /><br /> <br />

   <div class="panel panel-info">
    <div class="panel-heading">Custom click in ng-repeat</div>  
    <div class="panel-body" ng-repeat = "action in actions" >
      <li custom-click="{{action.command}}" style = "cursor:pointer">{{action.text}}</li>
    </div>
   </div>

  </body>

http://plnkr.co/edit/6DeswChVqEGDw12yGRFL?p=preview

动态添加角度ng-click功能

1 个答案: