如何使用模型中的函数表达式将函数动态绑定到ng-click

How to dynamically bind function to ng-click using the function expression from model

本文关键字：函数 动态绑定 ng-click 表达式 模型 何使用      更新时间：2023-09-26

我的Angular模板中有以下元素来生成一个带有Font Awesome图标的按钮栏：

<li 
    data-ng-repeat="btn in navigation.buttonBar" 
    data-ng-click="{{ btn[1] }}"
    class="btn btn-default" style="font-size: 30px; vertical-align: middle;"
    tooltip-placement="bottom" tooltip="{{ btn[2] }}">
        <i class="fa {{ btn[0] }}"></i>
</li>

navigation.buttonBar是以下数组：

[
    [ "fa-minus", "less()", "Show fewer cloud buttons." ],
    [ "fa-plus", "more()", "Show more cloud buttons." ],
    [ "fa-minus-square", "smaller()", "Make cloud buttons smaller." ],
    [ "fa-plus-square", "bigger()", "Make cloud buttons bigger." ],
    [ "fa-bars", "toggleShowStrings()", "Toggle display of matching strings." ],
    [ "fa-refresh", "initialize();", "Load more content." ],
    [ "fa-undo", "resetQuery()", "Clear query." ]
]

文本和图标渲染正确，但生成的按钮不起作用。当我检查该元素时，我发现btn[1]已正确展开。用什么替换{{ btn[1] }}以使其正常工作？

我不认为您可以将函数表达式从绑定中指定为字符串。如果你试图使用插值，它会抛出语法错误，如果你把它用作绑定，它也没有用。相反，您可能需要使用$parse并执行类似操作。

app.controller('MainCtrl',['$scope', '$parse', function($scope, $parse) { //<-- inject parse
    //.. Some code
    //Make this as handler to ngClick passing expression which is function name you have in your model
    $scope.callFunc = function(exp){
       $parse(exp)($scope); //Parse the function name to get the expression and invoke it on the scope
    }
    //Your specific function to be called
    $scope.less = function(){
      console.log('less');
    }
    $scope.more = function(){
      console.log('more');
    }

在你看来：-

     data-ng-click="callFunc(btn[1])"


var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $parse) {
  $scope.navigation = {buttonBar:[
    [ "fa-minus", "less()", "Show fewer cloud buttons." ],
    [ "fa-plus", "more()", "Show more cloud buttons." ],
    [ "fa-minus-square", "smaller()", "Make cloud buttons smaller." ],
    [ "fa-plus-square", "bigger()", "Make cloud buttons bigger." ],
    [ "fa-bars", "toggleShowStrings()", "Toggle display of matching strings." ],
    [ "fa-refresh", "initialize();", "Load more content." ],
    [ "fa-undo", "resetQuery()", "Clear query." ]
]};
  $scope.callFunc = function(exp){
    $parse(exp)($scope);
  }
  
  $scope.less = function(){
    console.log('less');
  }
  
  $scope.more = function(){
   console.log('more');
  }
});
    <link data-require="bootstrap-css@*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.25/angular.js" data-semver="1.2.25"></script>

  <div ng-app="plunker" ng-controller="MainCtrl">
     <i>Click the first 2 buttons and check the console</i>
    <ul><li 
    data-ng-repeat="btn in navigation.buttonBar" 
    data-ng-click="callFunc(btn[1])"
    class="btn btn-default" style="font-size: 30px; vertical-align: middle;"
    tooltip-placement="bottom" tooltip="{{ btn[2] }}"
><i class="fa {{ btn[0] }}"></i></li></ul>
 </div>

相关文章：