如何在AngularJS指令模板中动态定义要使用ng点击调用的函数

前端之家收集整理的这篇文章主要介绍了如何在AngularJS指令模板中动态定义要使用ng点击调用的函数前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试动态生成表单输入和基于模型的关联动作菜单.我可以传递要使用的字段和菜单,但是我无法弄清楚如何配置ng-click以调用模型中定义的相应函数.看到小提琴:
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>

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

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

我究竟做错了什么?还是有更好的方式来做这个(包括调用函数菜单结构必须来自模型,以便我构建一个通用表单生成功能).

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

有很多问题.

>你的打字错误为$sopce的4倍.
>如果您希望$scope.menu中的项目可以访问ActionOne和ActionTwo,则需要在上面定义您定义$scope.menu的那些Action函数(这就是当您为变量分配函数时JavaScript如何工作) .
>你有ActionOne定义了两次,其中第二个应该是ActionTwo.
ng-click是期望一个方法调用,而不是一个指向函数的指针,因此应该是ng-click =“item.func()”.
>您希望您的菜单项具有指向功能的指针,但您已将其定义为字符串…即使您将“ActionOne()”从引号中删除,仍然无法工作的原因有两个:

> ActionOne不存在作为MyCtrl里面的一个功能,而是需要被引用为$scope.ActionOne
>你只需要一个指向ActionOne的指针,你实际上并不想在这一点上调用它.由于括号,当MyCtrl被激活时,这两个动作都将被调用.

在进入Angular之前了解JavaScript的基础知识可能是个好主意,因为Angular假设您对语言的细微差别有了很好的了解.道格拉斯·克罗克福德有一个series of videos可以让你开始.

原文链接:https://www.f2er.com/angularjs/140622.html

猜你在找的Angularjs相关文章