所以我正在尝试使用 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:更新了实现,但是我并不特别喜欢它如何通过定位其他指令元素将两个指令链接在一起。