web-dev-qa-db-ja.com

AngularJS：引数/関数をディレクティブに渡す方法は？

this Fiddle を見てください。テンプレートの式がHTMLで定義した引数を使用して評価されるようにするには、何を変更する必要がありますか？ SAVEボタンは、コントローラーのblabla()- functionを呼び出す必要があります。

var myApp = angular.module('MyApp',[])
myApp.directive('editkeyvalue', function() {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            accept: "expression"
        },
        template : '<div><label class="control-label">{{key}}</label>' +
        '<label class="control-label">{{key}}</label>' +
          '<input type="text" ng-model="value" />'+
        '<button type="button" x-ng-click="cancel()">CANCEL</button>' +
        '<button type="submit" x-ng-click="save()">SAVE</button></div>',

      controller: function($scope, $element, $attrs, $location) {
        $scope.save= function() {
          $scope.accept();
        };
      }
    }
});

私は本当にそれを見通していない。手伝ってくれてありがとう！

javascripthtml5controllerscopeangularjs
46
user1879408

Royが提案するように、property: '='で双方向のデータバインディングを設定できます。したがって、keyとvalueの両方をローカルスコープにバインドする場合は、次のようにします。

scope: {
    key: '=',
    value: '='
},

これらの値を渡すため、ディレクティブのコントローラーで値にアクセスできます。しかし、親スコープのコンテキストで関数を実行したい場合は、accept属性で何をしたいのかと思われる場合は、angularのように伝える必要がありますこの

scope: {
    accept: "&"
}

これで、saveメソッドからacceptを介して渡された関数を呼び出すことができます

controller: function($scope, $element, $attrs, $location) {
    $scope.save= function() {      
        $scope.accept()
    };
}

jsfiddle

46
jaime
scope: {
    accept: "&"
}

関数名に小文字を使用しないと、機能しません。

15
user1972450

ラップ機能の保存は必要ないという簡単なメモ。テンプレートでこれを呼び出すだけです：

'<button type="submit" x-ng-click="accept()">SAVE</button></div>',

それは関数呼び出しを転置し、期待どおりにパラメーターを渡します。

これによりコードが簡素化され、読みやすくなります。

1
Gary Blake