如何动态绑定功能，利用模型功能前pression到NG-点击 [英] How to dynamically bind function to ng-click using the function expression from model

问题描述

我在角模板下面的元素来生成字体真棒图标的按钮栏：

 ＆LT;李
    数据-NG-重复=BTN在navigation.buttonBar
    数据-NG-点击={{BTN [1]}}
    类=BTN BTN-默认的风格=FONT-SIZE：30PX;垂直对齐：中间;
    提示贴装=底工具提示={{BTN [2]}}＆GT;
        ＆LT; I类=发{{BTN [0]}}＆GT;＆LT; / I＆GT;
＆LT; /李＆GT;
 

navigation.buttonBar是以下数组的数组：

  [
    [FA-减，少（），显示更少云的按钮。 ]
    [FA-加，更多的（），显示更多的云按钮。 ]
    [FA-负方，小（），使云按钮较小。 ]
    [发加广场，做大（），使云按钮更大。 ]
    [FA-酒吧，toggleShowStrings（），字符串匹配的切换显示。 ]
    [FA-刷新，初始化（）;，加载更多的内容。 ]
    [FA-撤销，resetQuery（），清除查询。 ]
]
 

文字和图标正确渲染，但由此产生的按钮不起作用。当我检查的元素，我看到 BTN [1] 正确扩大。我怎么替换 {{BTN [1]}} 以使这项工作正常？

解决方案

我不认为你可以从绑定分配功能的前pression为字符串。如果您尝试使用插值它会抛出语法错误，如果你把它作为约束是没有用的为好。相反，你将需要大概使用 $解析 并做这样的事情。

  app.controller（'MainCtrl'，['$范围，$解析'，函数（$范围，$解析）{//＆LT;  - 注入解析
    // ..有些code    //使这个作为处理程序ngClick传递函数名，你在你的模型有其前pression
    $ scope.callFunc =功能（EXP）{
       $解析（EXP）（$范围内）; //解析函数名，以获得前pression并调用它的适用范围
    }
    //你的特异功能被称为
    $ scope.less =功能（）{
      的console.log（'少'）;
    }
    $ scope.more =功能（）{
      的console.log（'更多'）;
    }
 

在您的视图做的事： -

 数据-NG-点击=callFunc（BTN [1]）
 

\r

\r

VAR应用= angular.module（'plunker'，[]）;\r
\r
app.controller（'MainCtrl'，函数（$范围，$解析）{\r
  $ scope.navigation = {按钮栏：\r
    [FA-减，少（），显示更少云的按钮。 ]\r
    [FA-加，更多的（），显示更多的云按钮。 ]\r
    [FA-负方，小（），使云按钮较小。 ]\r
    [发加广场，做大（），使云按钮更大。 ]\r
    [FA-酒吧，toggleShowStrings（），字符串匹配的切换显示。 ]\r
    [FA-刷新，初始化（）;，加载更多的内容。 ]\r
    [FA-撤销，resetQuery（），清除查询。 ]\r
]};\r
\r
  $ scope.callFunc =功能（EXP）{\r
    $解析（EXP）（$范围内）;\r
  }\r
  \r
  $ scope.less =功能（）{\r
    的console.log（'少'）;\r
  }\r
  \r
  $ scope.more =功能（）{\r
   的console.log（'更多'）;\r
  }\r
}）;

\r

＆LT;链路数据需要=引导，CSS @ *数据semver =3.2.0的rel =stylesheet属性HREF =// maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css/＆GT;\r
    ＆LT;脚本＆GT;的document.write（'＆LT;基本href =+ document.location +'/＆GT;'）;＆LT; / SCRIPT＆GT;\r
    ＆LT;链接rel =stylesheet属性HREF =style.css文件/＆GT;\r
    ＆所述;脚本数据需要=[e-mail] =的https：//$c$c.angularjs.org/1.2.25/angular.js数据semver =1.2.25＆GT ;＆LT; / SCRIPT＆GT;\r
\r
\r
\r
\r
  ＆LT; D​​IV NG-应用=plunkerNG控制器=MainCtrl＆GT;\r
     ＆LT; I＆gt;点击第2个按钮，检查控制台＆LT; / I＆GT;\r
    ＆LT; UL＆GT;＆LT;李\r
    数据-NG-重复=BTN在navigation.buttonBar\r
    数据-NG-点击=callFunc（BTN [1]）\r
    类=BTN BTN-默认的风格=FONT-SIZE：30PX;垂直对齐：中间;\r
    提示贴装=底工具提示={{BTN [2]}}\r
＆GT;＆LT; I类=发{{BTN [0]}}＆GT;＆LT; / I＆GT;＆LT; /李＆GT;＆LT; / UL＆GT;\r
 ＆LT; / DIV＆GT;

\r

\r

\r

I have the following element in my Angular template to generate a button bar with Font Awesome icons:

<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 is the following array of arrays:

[
    [ "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." ]
]

The text and icons render correctly, but the resulting buttons don't work. When I inspect the element, I see that btn[1] was expanded correctly. What do I replace {{ btn[1] }} with to make this work properly?

解决方案

I don't think you can just assign the function expression as string from a binding. If you try to use interpolation it is going to throw syntax error, If you use it as binding it is of no use as well. Instead you would need to probably use $parse and do something like this.

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');
    }

In your view do:-

     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>

这篇关于如何动态绑定功能，利用模型功能前pression到NG-点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！