我正在尝试将一个MetroUI模态对话框绑定到一个角控制器属性。这样我就可以使用绑定显示和隐藏对话框。
指令appMod.directive('showDialog', ['$timeout', function ($timeout): ng.IDirective {
return {
restrict: 'A',
link: function (scope, element, attrs, ngModel) {
scope.$watch(attrs.showDialog, function (value) {
if (value) {
element.show();
}
else {
element.hide();
}
});
}
}
}]);
HTML: <div class="padding20 dialog" id="dialog9"
data-role="dialog" data-close-button="true"
data-overlay="true" data-overlay-color="op-dark"
show-dialog="vm.isDialogVisible">
这样我就可以通过设置虚拟机来控制打开对话框。控制器上的isDialogVisible布尔值。
问题是我正在尝试更新虚拟机。isDialogVisible属性,当用户关闭对话框时(通过关闭按钮)。有人知道怎么解决这个问题吗?
找到自己的解决方案总是很酷(花了我一天时间:-))。我犯了一个错误,使用了元素的显示/隐藏功能。我应该使用元素的data属性。这样我就可以访问
onDialogClose
函数,它使我能够更新作用域。
appMod.directive(showDialog, ['$timeout','$parse',function ($timeout, $parse){
return {
restrict: 'A',
scope:false,
link: function (scope, element, attrs) {
var e1 = theDialog.data('dialog');
$timeout(() => {
e1.options.onDialogClose = (dialog) => {
var model = $parse(attrs.showDialog);
model.assign(scope, false);
scope.$digest();
};
}, 0);
scope.$watch(attrs.showDialog, function (value) {
if (value) {
e1.open();
}
else {
e1.close();
}
});
}
}
}]);