如何在 AngularJS 指令模板中动态定义要使用 ng-click 调用的函数 [英] How do I dynamically define a function to call with ng-click in AngularJS directive template

问题描述

我正在尝试根据模型动态生成表单输入和关联的操作菜单.我能够传递要使用的字段和菜单，但我不知道如何配置 ng-click 以调用模型中定义的适当函数.见小提琴:http://jsfiddle.net/ahonaker/nkuDW/

HTML:

var myApp = angular.module('myApp',[]);myApp.directive('myDirective', function($compile) {返回 {限制:E"，替换:真的，范围 : {字段:'='，标签:'='，菜单:'='},链接:函数(范围、元素、属性){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() {});函数 MyCtrl($scope) {$scope.status = '你还没有选择';$scope.menu = [{ "title" : "Action 1", "func" : "ActionOne()"},{ "title" : "Action 2", "func" : "ActionTwo()"},]$scope.fieldOne = "我是字段 1";$scope.fieldTwo = "我是第二场";$scope.ActionOne = function() {$sopce.status = "你选择了行动 1";}$scope.ActionOne = function() {$sopce.status = "你选择了行动 2";}}

JS:

<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>你好，{{status}}！

任何帮助将不胜感激.我在指令中尝试了以下 ng-click 方法

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

我做错了什么?或者有没有更好的方法来做到这一点(包括要调用的功能的菜单结构必须来自模型，以便我构建通用的表单生成功能).

解决方案

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

它有很多问题.

1. 你有一个错字 $scope 作为 $sopce 错字 4 次.
2. 如果您希望 $scope.menu 中的项目可以访问 ActionOne 和 ActionTwo，您需要定义这些 Action 函数在上面定义 $scope.menu 的地方(这就是 JavaScript 在将函数分配给变量时的工作方式).
3. 您已经定义了两次 ActionOne，其中第二个应该是 ActionTwo.
4. ng-click 需要一个方法调用，而不是一个指向函数的指针，所以它应该是 ng-click="item.func()".
5. 您希望菜单项具有指向函数的指针，但您已将它们定义为字符串...即使您将 "ActionOne()" 从引号中取出，它仍然不会工作有两个原因:
   1. ActionOne 不作为 MyCtrl 内部的函数存在，而是需要引用为 $scope.ActionOne
   2. 您只需要一个指向 ActionOne 的指针，此时您实际上并不想调用它.由于有括号，这两个操作都会在 MyCtrl 初始化时调用.

在进入 Angular 之前了解 JavaScript 的基础知识可能是一个好主意，因为 Angular 假设您对语言的细微差别有很好的理解.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 指令模板中动态定义要使用 ng-click 调用的函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！