46

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

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();
        };
      }
    }
});

私はそれを見抜けません。手伝ってくれてありがとう！

4

3 に答える 3

46

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

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

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

scope: {
    accept: "&"
}

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

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

ここにjsfiddleがあります

于 2012-12-05T16:10:14.783 に答える
1

ラッピング機能の保存は必要ないことに注意してください。テンプレートでこれを呼び出すだけです：

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

これにより、関数呼び出しが転置され、期待どおりにパラメーターが渡されます。

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

于 2015-03-30T17:54:10.540 に答える