9

我正在尝试基于模型动态生成表单输入和关联的操作菜单。我能够传递要使用的字段和菜单，但我不知道如何配置 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}}"

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

4

2 回答 2

26

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

它有很多问题。

  1. 你有一个错字$scope4 次作为$sopce.
  2. 如果您希望其中的项目$scope.menu可以访问ActionOneand 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提供的一系列视频可以帮助您入门。

于 2013-04-19T20:01:30.030 回答
0

我不想处理在我的 Angular 应用程序中包含 html 代码、指令或 eval 的使用。所以我只是将我现有的函数包装在一个函数中：

$scope.get_results = function(){

    return {
            message: "A message", 
            choice1: {message:"choice 1 message", f: function(){$scope.alreadyDefinedFunction1()}},
            choice2: {message:"choice 2 message", f: function(){$scope.alreadyDefinedFunction2()}},
        };
}

在不同的功能中：

$scope.results2 = $scope.get_results();

html中的使用片段：

<ul class="dropdown-menu scroll-div">
  <li><a ng-click="results2.choice1.f()">{{results_2_menu.choice1.message}}</a></li>
  <li><a ng-click="results2.choice2.f()">{{results_2_menu.choice2.message}}</a></li>
</ul>

基于这个 js 小提琴：http: //jsfiddle.net/cdaringe/FNky4/1/

于 2016-06-17T16:50:22.193 回答