[英]Closing an Angular Material dialog
Calling $mdDialog.cancel() from the controller will close the dialog.从控制器调用 $mdDialog.cancel() 将关闭对话框。 But is there a way of not using a controller to close the dialog box like directly from the html ?
但是有没有一种方法可以不使用控制器直接从 html 中关闭对话框? I want something like this to work:
我想要这样的工作:
<md-dialog-actions layout="row">
<span flex></span>
<md-button ng-click="$mdDialog.cancel()" style="margin-right:20px;" >
Ok
</md-button>
</md-dialog-actions>
In your show()
code, you can create a child scope and add the close()
function:在您的
show()
代码中,您可以创建一个子作用域并添加close()
函数:
$mdDialog.show({
...
scope: angular.extend($scope.$new(), { close: function() {$mdDialog.cancel();} })
});
Then in your dialog's HTML, just use ng-click="close()"
.然后在对话框的 HTML 中,只需使用
ng-click="close()"
。
Alternatively, you can pass the $mdDialog
object as a property of your scope.或者,您可以将
$mdDialog
对象作为作用域的属性传递。
However, it's even more code than creating a controller (which can also be created inside the show()
function).然而,它比创建控制器(也可以在
show()
函数中创建show()
更多的代码。
Simply简直
<md-button ng-click="cancel()"></md-button>
And in your dialog controller在你的对话控制器中
$scope.cancel = function() {
$mdDialog.cancel();
}
You can add mat-dialog-close
to the button you want to trigger the close event from您可以将
mat-dialog-close
添加到要从中触发关闭事件的按钮
Example: <button mat-dialog-close> Close </button>
示例:
<button mat-dialog-close> Close </button>
You can bind an scope into the dialog config:您可以将范围绑定到对话框配置中:
$mdDialog.show({ targetEvent: $event, template: '<md-dialog>' + ' <md-dialog-content>Hello {{ employee }}!</md-dialog-content>' + ' <md-dialog-actions>' + ' <md-button ng-click="closeDialog()" class="md-primary">' + ' Close Greeting' + ' </md-button>' + ' </md-dialog-actions>' + '</md-dialog>', scope: $scope, preserveScope: true });
For more info about the config properties you can see the dialog config documentation in here有关配置属性的更多信息,您可以在此处查看对话框配置文档
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.