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();
};
}
}
});
私は本当にそれを見通していない。手伝ってくれてありがとう!
Royが提案するように、property: '='
で双方向のデータバインディングを設定できます。したがって、key
とvalue
の両方をローカルスコープにバインドする場合は、次のようにします。
scope: {
key: '=',
value: '='
},
これらの値を渡すため、ディレクティブのコントローラーで値にアクセスできます。しかし、親スコープのコンテキストで関数を実行したい場合は、accept
属性で何をしたいのかと思われる場合は、angularのように伝える必要がありますこの
scope: {
accept: "&"
}
これで、save
メソッドからaccept
を介して渡された関数を呼び出すことができます
controller: function($scope, $element, $attrs, $location) {
$scope.save= function() {
$scope.accept()
};
}
scope: {
accept: "&"
}
関数名に小文字を使用しないと、機能しません。
ラップ機能の保存は必要ないという簡単なメモ。テンプレートでこれを呼び出すだけです:
'<button type="submit" x-ng-click="accept()">SAVE</button></div>',
それは関数呼び出しを転置し、期待どおりにパラメーターを渡します。
これによりコードが簡素化され、読みやすくなります。