Angular ng-click 功能动态添加答案

【问题标题】：Angular ng-click function added dynamicallyAngular ng-click 功能动态添加
【发布时间】：2015-10-16 17:46:34
【问题描述】：

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

指令

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

【问题讨论】：

在 ng-click="command()" 和 command 函数内部实现实际发生的逻辑（无论是附加文件还是其他）
是的。在 attachFile 我有我的业务逻辑。假设我打开一个对话框。
您想将动态处理程序分配给ng-click 对吗？有时是attachFile，有时是别的东西。这是你需要的吗？我是说您应该创建一个通用处理程序并在其中处理调用实际处理程序的所有逻辑
这是一种方式。但是有没有办法在函数参数中传递角度值。像 ng-click ="vm.attachFile('{{ attach.text}}','test',3); 这样说。我在开发人员中尝试过这样的尝试，它显示值和函数被调用，但第一个参数的值为"{{ attach.text }}" :(
我得到了这个 ng-click ="vm.attachFile(attach.text,'test',3) 并且它有效。:) 但是如果有办法让动态处理程序打开ng-点击！！

标签： angularjs model-view-controller angularjs-ng-repeat angularjs-ng-click

【解决方案1】：

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

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

【讨论】：