javascript 在指令链接函数中使用 $mdDialog 的 AngularJS 材料
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30721086/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS Material using $mdDialog in a directive linking function
提问by nikk wong
I am trying to put an Angular Material dialogin a directive's linking function. Conceptually, I'm not seeing why this would not be possible. As per the docs, the $mdDialog.showis on a scope and $mdDialog.hide();rests in a controller defined by the $mdDialog.showobject. I've been able to get the dialog to popup—and though closeModal()executes (I can tell by the console.log), $mdDialog.hide()never executes and the modal never hides.
我正在尝试将一个Angular Material 对话框放在指令的链接函数中。从概念上讲，我不明白为什么这是不可能的。根据文档，$mdDialog.showis 在一个范围内，并$mdDialog.hide();位于由$mdDialog.show对象定义的控制器中。我已经能够让对话框弹出——虽然closeModal()执行（我可以通过 console.log 判断），但$mdDialog.hide()永远不会执行，模态永远不会隐藏。
angular.module('app', ['ngMaterial'])
.directive('addLayer', ['$mdDialog', function($mdDialog) {
return {
template: '<h1 ng-click="openDialog()">Open Dialog</h1><div>alert: {{alert}}</div>',
scope: {},
link: function(scope) {
scope.alert = '';
scope.addLayerDialog = function() {
$mdDialog.show({
parent: angular.element(document.body),
templateUrl: {...},
controller: function($scope, $mdDialog) {
$scope.hide = function() {
$mdDialog.hide();
};
$scope.cancel = function() {
$mdDialog.cancel();
};
$scope.answer = function(answer) {
console.log($mdDialog.hide('answer'));
$mdDialog.hide(answer);
};
}
}).then(function(answer) {
scope.alert = 'You said the information was "' + answer + '".';
}, function() {
scope.alert = 'You cancelled the dialog.';
});
};
}
};
}]);
Why is this not working? Is it simply not possible to define a mdDialogmodal from within a directive?
为什么这不起作用？是否根本不可能mdDialog从指令中定义模态？
Here is a Plnkr I've been tinkering with:
这是我一直在修补的 Plnkr：
http://plnkr.co/edit/qVczPkuZgtL2CCtLRFrH?p=preview
http://plnkr.co/edit/qVczPkuZgtL2CCtLRFrH?p=preview
Thanks a bunch. This has driving me nuts for several hours.
谢谢一堆。这让我疯狂了几个小时。
采纳答案by kwangsa
Edited : the issue is with "transition-in" css class, if you remove it the hide works.
已编辑：问题在于“transition-in”css 类，如果删除它，隐藏工作。
Check the git for angular material, it seems $mdDialog using "transition-in" class to show the dialog and "transition-out" to hide it, so if you include "transition-in" then it will disable the hide.
检查 git 的角度材料，似乎 $mdDialog 使用“transition-in”类来显示对话框和“transition-out”来隐藏它，所以如果你包含“transition-in”，那么它将禁用隐藏。
