在AngularJS指令模板如何动态地定义一个函数调用纳克点击 [英] How do I dynamically define a function to call with ng-click in AngularJS directive template

问题描述

我试图动态生成表单输入，并基于该模型相关的操作菜单。我能够通过所使用的字段和菜单，但我无法弄清楚如何配置NG-点击呼叫模型中定义相应的功能。见小提琴：
  http://jsfiddle.net/ahonaker/nkuDW/

HTML

  VAR对myApp = angular.module（'对myApp'，[]）;myApp.directive（'myDirective'，函数（$编译）{
    返回{
        限制：E，
        更换：真实，
        范围 ： {
            现场：'='，
            标签：'='，
            菜单：'='
        }，
        链接：功能（范围，元素，ATTRS）{
            element.html（'{{标签}}：LT;输入NG模型=场＆GT;＆LT; UL NG重复=菜单项＆LT;李＆GT;＆LT;一个NG点击=item.func ＆GT; {{item.title}}＆下; / A＆GT;＆下; /利＆GT;＆下; / UL＆GT;'）;
             $编译（element.contents（））（范围）;
        }
    }
}）;
//myApp.factory('myService'，函数（）{}）;功能MyCtrl（$范围）{
    $ scope.status ='你没听没有';    $ scope.menu = [
        {称号：动作1，FUNC：ActionOne（）}，
        {称号：行动2，FUNC：ActionTwo（）}，
        ]    $ scope.fieldOne =我是场1;
    $ scope.fieldTwo =我是场2    $ scope.ActionOne =功能（）{
         $ sopce.status =你选动作1;
     }    $ scope.ActionOne =功能（）{
         $ sopce.status =你选行动2
     }
}
 

JS：

 ＆LT; D​​IV NG-应用=对myApp＆GT;
    ＆LT; D​​IV NG控制器=MyCtrl＆GT;
        ＆LT; UL＆GT;
            ＆LT; P＆GT;＆LT;我-指令字段=fieldOne标签='字段1'菜单=菜单＆GT;＆LT; /我-指令＆GT;＆LT; / P＆GT;
            ＆LT; P＆GT;＆LT;我-指令字段=fieldTwo标签='字段2'菜单=菜单＆GT;＆LT; /我-指令＆GT;＆LT; / P＆GT;
        ＆LT; / UL＆GT;
        您好，{{状态}}！
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

任何帮助将是AP preciated。我试着在指令下NG-点击办法

 纳克单击= {{item.func}}
NG-点击=item.func
NG-点击={{item.func}}
 

我是什么做错了吗？还是有更好的方式来做到这一点（菜单结构，包括被称为功能都来自于模型，以便为我建立一个通用的形式生成功能）。

解决方案

这是你的固定提琴： http://jsfiddle.net/nkuDW / 1 /

有问题大量用它。

1. 您已经有了一个错字 $范围 typo'd 4倍 $ sopce 。


2. 如果你想在 $ scope.menu 的项目有机会获得 ActionOne 和 ActionTwo ，你需要定义上面，你定义这些动作的功能 $ scope.menu （这时候你的JavaScript分配是如何工作的函数变量）。


3. 您已经有了 ActionOne 定义了两次，其中第二个应该是 ActionTwo 。


4. NG-点击期待一个方法调用，而不是指向一个功能，因此它应该是 NG-点击=item.func（）。


5. 您希望您的菜单项有函数指针，但你他们定义为串......即使你把ActionOne（）出报价，它仍然不会有两个原因的工作：
   
   
   
   1. ActionOne 不存在作为MyCtrl内的一个函数，而不是它需要为 $ scope.ActionOne
   
   
   2. 您只是想要一个指针ActionOne，你不会真的想在这一点上调用它。因为括号的时候MyCtrl是initalized两个行为将被调用。
   
   



这可能是一个好主意，跳进角之前了解的JavaScript的基础知识，如角假设你有语言的细微差别有很好的理解。有一个一系列由Douglas Crockford的的视频，可以让你开始。

I'm trying to dynamically generate form inputs and an associated action menu based on the model. I'm able to pass the field to be used and the menu, but I can't figure out how to configure ng-click to call the appropriate function defined in the model. See fiddle : http://jsfiddle.net/ahonaker/nkuDW/

HTML:

var myApp = angular.module('myApp',[]);

myApp.directive('myDirective', function($compile) {
    return {
        restrict: "E",
        replace: true,
        scope : {
            field: '=',
            label: '=',
            menu: '='
        },
        link:  function (scope, element, attrs) {
            element.html('{{label}}: <input ng-model="field"> <ul ng-repeat="item in menu"<li><a ng-click="item.func">{{item.title}}</a></li></ul>');
             $compile(element.contents())(scope);
        }
    }
});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.status = 'You have not picked yet';

    $scope.menu = [
        { "title" : "Action 1", "func" : "ActionOne()"},
        { "title" : "Action 2", "func" : "ActionTwo()"},
        ]

    $scope.fieldOne = "I am field 1";
    $scope.fieldTwo = "I am field 2";

    $scope.ActionOne = function() {
         $sopce.status = "You picked Action 1";   
     }    

    $scope.ActionOne = function() {
         $sopce.status = "You picked Action 2";   
     }            
}

JS:

<div ng-app = "myApp">
    <div ng-controller="MyCtrl">
        <ul>
            <p><my-directive field="fieldOne" label="'Field 1'" menu="menu"></my-directive></p>
            <p><my-directive field="fieldTwo" label="'Field 2'" menu="menu"></my-directive></p>
        </ul>
        Hello, {{status}}!
</div>
</div>

Any help would be appreciated. I've tried the following ng-click approaches in the directive

ng-click={{item.func}}
ng-click="item.func"
ng-click="{{item.func}}"

What am I doing wrong? Or is there a better way to do this (the menu structure including the functions to be called have to come from the model in order for me to build a generic form generation capability).

解决方案

Here's your fixed fiddle: http://jsfiddle.net/nkuDW/1/

There were a great number of problems with it.

1. You've got a typo $scope typo'd 4 times as $sopce.
2. If you want items within $scope.menu to have access to ActionOne and ActionTwo, you'll need to define those Action functions above where you define $scope.menu (that's just how JavaScript works when you're assigning functions to variables).
3. You've got ActionOne defined twice, where the second one should be ActionTwo.
4. ng-click is expecting a method call, not a pointer to a function so it should be ng-click="item.func()".
5. You want your menu items to have pointers to functions, but you've defined them as strings... even if you take "ActionOne()" out of quotations, it still won't work for two reasons:
   1. ActionOne doesn't exist as a funcion inside of MyCtrl, instead it needs to be referenced as $scope.ActionOne
   2. You just want a pointer to ActionOne, you don't actually want to call it at this point. Because of the parenthesis, both actions would be called when MyCtrl is initalized.

It would probably be a good idea to understand the basics of JavaScript before jumping into Angular, as Angular assumes you have a good understanding of the nuances of the language. There are a series of videos by Douglas Crockford that can get you started.

这篇关于在AngularJS指令模板如何动态地定义一个函数调用纳克点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！