我尝试了一些来自某些来源的方法,但仍无法解决材料Angularjs预定义HTML对话框的关闭按钮的问题。当我按下对话框的外部区域时,可以正常关闭。
我使用的错误消息使用batarang angular是取消是未定义的。
var app = angular.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
app.controller('AppCtrl', function($scope, $mdDialog) {
$scope.showTermUseDialog = function(ev) {
$mdDialog.show({
controller: DialogController,
contentElement: '#termUseDialog',
parent: angular.element(document.body),
targetEvent: ev,
clickOutsideToClose: true,
scope: $scope,
preserveScope: true
});
};
function DialogController($scope, $mdDialog) {
$scope.hide = function() {
$mdDialog.hide();
};
$scope.cancel = function() {
$mdDialog.cancel();
};
}
});
完整代码可以在此处查看:
http://codepen.io/skylee91/pen/xrolxo
注意:
如果角材料版本为1.1.0,则代码按预期运行。但是目前,我正在使用最新的稳定构建1.1.1,关闭按钮没有触发ng-click
事件。
解决方案
- 目前没有版本1.1.1稳定版本的解决方案,因为"预渲染对话框"将不会链接到任何范围,也不会实例化新的控制器。'
- 目前,我使用角模板对话框来解决此问题。
您必须将范围和保存范围添加到Showmentusedialog $scope.showTermUseDialog = function(ev) {
$mdDialog.show({
controller: DialogController,
contentElement: '#termUseDialog',
parent: angular.element(document.body),
targetEvent: ev,
clickOutsideToClose: true,
scope: $scope,
preserveScope: true
});
};
,还添加一个呼叫以在HTML中关闭;ng-click="close()"
请参阅此处:http://plnkr.co/edit/c1tcfqvmcyj7ztkritoa?p=preview