そこで、Angular を使用してカスタム確認ボックスを実装しようとしています。理想的には、機能を有効にする属性を追加したいだけです。例:
<button type="button" ng-click="delete(foo)">Delete</button> -> <button type="button" ng-click="delete(foo)" ng-confirm="Are you sure you want to delete this foo?">Delete</button>
(foo は ng-repeat 内にあります... fooList 内の foo..)
したがって、私が抱えているすべての問題は、通常は別のボタンに発生するクリック イベントを関連付けることに関連しています。モーダルを作成し(ブートストラップを使用しない)、すべての表示/非表示/などを処理する別のディレクティブ「confirmBox」があります。
私が現在使用しているものでは、本当に避けたい ng-click 機能を変更する必要があります。
現在の実装:
<button ... ng-click="confirm('Are you sure you want to delete this foo?, 'delete', foo)">Delete</button>
var confirmModule = angular.module('confirm', []);
confirmModule.run(function($rootScope) {
$rootScope.confirm = function(text, func, obj) {
$rootScope.$broadcast('confirm', func, obj, text);
};
});
confirmModule.directive('confirmBox', function($parse) {
return {
restrict: 'A',
template: myModalTemplate,
link: function(scope, element, attrs){
element.hide();
var noBtn = element.find("[name='no']");
noBtn.bind("click", function() {
element.hide();
});
scope.$on("confirm", function(event, func, obj, text) {
var yesBtn = element.find("[name='yes']");
element.show();
yesBtn.unbind("click").bind("click", function() {
scope[func](obj);
});
});
}
}
});
誰にもアイデアはありますか?ボタンのディレクティブを追加することから始めて、クリックイベントのバインドを解除して、ng-click
発生しないようにしました。次に、で実行できる属性の文字列'delete(foo)'
が残りますが、それを別のディレクティブ ボタンのクリックに関連付ける方法がわかりません。ng-click
$parse(attrs.ngClick)(scope)
編集:これは、実装における私の現在の試みのフィドルです。問題は、関数に渡される変数が常に未定義であることです。
Edit2:更新された実装ですが、他のディレクティブ要素をターゲットにして2つのディレクティブをリンクする方法が特に好きではありません。