我尝试在我的指令中做这样的事情 - 即改变喜欢'触发'属性的模型的值:
angular.element(element).on('hidden.bs.modal', function () {
scope.$apply(function () {
attrs.$set('trigger', null);
});
});
它不起作用。为什么?我应该以其他方式做到吗?
我设置了一个对话框,当设置了 showRemoveDialog 标志时会触发该对话框。当用户点击删除按钮时,会设置此标记。
这是一个对话框的开始标记:
<div remove-dialog trigger="{{showRemoveDialog}}" class="modal fade" id="myModal">
然后我有一个指令 removeDialog :
myApp.directive("removeDialog", function () {
return {
restrict: 'A',
link: function (scope, element, attrs, controller) {
angular.element(element).on('hidden.bs.modal', function () {
scope.$apply(function () {
attrs.$set('trigger', null);
});
});
attrs.$observe('trigger', function (newValue) {
if (newValue) {
angular.element(element).modal('show');
} else {
angular.element(element).modal('hide');
}
});
},
controller: 'DeleteController'
};
});
如您所见,我观察触发器属性,当它变为 true (用户点击删除按钮)时,我会显示对话框:
$scope.remove = function () {
$scope.showRemoveDialog = true;
};
它有效。
但是,如果触发器的值更改为 false / null ,我想关闭它 - 例如单击“取消”按钮,或单击“X”图标。如果发生这两个动作中的一个,我需要将触发值设置为 false / null ,以便下次用户点击删除按钮值时会从false - &gt;是的,我的对话框再次出现。
问题是这段代码不起作用:
angular.element(element).on('hidden.bs.modal', function () {
scope.$apply(function () {
attrs.$set('trigger', null);
});
});
我的意思是它没有将范围中 {{showRemoveDialog}} 的值设置为null。我已经尝试了$ apply函数,但仍然是徒劳的。
我想我在角度方面做了一些非常错误的事情。请帮忙。
答案 0 :(得分:3)
是的,你提出的想法有点令人困惑,更改属性实际上不会改变范围变量,所以要修复这个你必须更改范围变量,在这种情况下你知道变量名称是什么这是可行的,但对于其他元素,你可能不知道变量是什么。要修复此特定问题,您必须这样做。
scope.showRemoveDialog = null;
scope.$apply();
但这不是很动态。这是我要做的(未经测试)。
将变量名称作为字符串
传递trigger="showRemoveDialog"
然后在你的指令中从$parse
myApp.directive("removeDialog", function ( $parse ) { ....
链接功能......
link: function (scope, element, attrs, controller) {
var variableName = attrs.trigger;
angular.element(element).on('hidden.bs.modal', function () {
$parse(variableName + ' = null')(scope);
scope.$apply(); // Might not be needed.
});
scope.$watch(variableName, function (newValue) {
if (newValue) {
angular.element(element).modal('show');
} else {
angular.element(element).modal('hide');
}
}, true); // true might not be needed.
},
此外,您不需要执行angular.element(element)
,因为传递给链接函数的元素应该已经被包装。
答案 1 :(得分:0)
jQuery on()方法的第一个参数是您正在侦听的事件。我以前从未见过它与自定义事件一起使用,只有像“keydown”这样的标准Javascript。所以我的第一个问题是你是否测试了事件挂钩被调用?如果没有放一个console.log(“事件叫”);在尝试设置元素的触发器属性之前。
我要提到的另一件事是将属性设置为null,就像那样无法工作。 Have a look at the AngularJS source code。相反,我会将属性设置为false。
最后我建议只使用包含一个很好的模态功能的the Angular UI Bootstrap library - 或其他什么,我不介意,但重新发明轮子似乎没必要。