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. $scopeのように4 回タイプミスがあり$sopceます。
  2. 内のアイテムがおよびに$scope.menuアクセスできるようにする場合は、定義した場所の上にそれらの Action 関数を定義する必要があります(これは、関数を変数に割り当てるときに JavaScript が機能する方法です)。ActionOneActionTwo$scope.menu
  3. ActionOne2 番目の定義はActionTwo.
  4. ng-click は、関数へのポインターではなく、メソッド呼び出しを予期しているため、ng-click="item.func()".
  5. メニュー項目に関数へのポインターを持たせたいのですが、それらを文字列として定義しています..."ActionOne()"引用符を外しても、2 つの理由で機能しません。
    1. ActionOneMyCtrl 内に関数として存在しないため、代わりに次のように参照する必要があります。$scope.ActionOne
    2. ActionOne へのポインターが必要なだけで、この時点で実際に呼び出す必要はありません。かっこがあるため、MyCtrl が初期化されると、両方のアクションが呼び出されます。

Angular は言語のニュアンスをよく理解していることを前提としているため、Angular に飛び込む前に JavaScript の基本を理解しておくことをお勧めします。Douglas Crockford による一連のビデオから始めることができます。

于 2013-04-19T20:01:30.030 に答える
0

Angular アプリ、ディレクティブ、または eval の使用に html コードを含めることに対処したくありませんでした。そのため、既存の関数を関数でラップしました。

$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 に答える