twitter-bootstrap AngularJS - 在对话框中打开控制器（动态加载模板）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16886356/
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 - open controller in a dialog (template loaded dynamically)
提问by migajek
I'm playing around with AngularJS. I'm using a controller and a templateUrl to have things done automagically :)
Currently the layout has only <div ng-view></div>directive into which all the things are loaded.
我在玩 AngularJS。我正在使用一个控制器和一个 templateUrl 来自动完成事情:) 目前布局只有<div ng-view></div>所有东西都加载到其中的指令。
I'd like to open the modal (Bootstrap or jQuery UI, doesn't matter) and load there(inside a modal's body) the controller specified by given link.
我想打开模态（Bootstrap 或 jQuery UI，无关紧要）并在那里（在模态的主体内）加载给定链接指定的控制器。
Just like every link "opens" (loads the template & does all the DOM compilation & linking) inside my main ng-view, I'd like some of the links to open inside the modal.
就像我的 main 中的每个链接“打开”（加载模板并执行所有 DOM 编译和链接）ng-view一样，我希望在模态中打开一些链接。
I've checked out what AngularStrap and Angular-UI Bootstrap has to offer, and neither of them has what I'm looking for.
我已经查看了 AngularStrap 和 Angular-UI Bootstrap 必须提供的功能，但它们都没有我想要的。
AngularStrap can obtain new partial template, but doesn't execute the new controller.
AngularStrap 可以获取新的部分模板，但不执行新的控制器。
Is there any solution / snippet that executes the second controller inside Modal/Dialog?
是否有任何解决方案/片段可以在模态/对话框中执行第二个控制器？
回答by Jason
Here's a plnkrthat demonstrates using the angular + ui-bootstrap to launch a dialog with it's own template and controller.
这是一个 plnkr，它演示了如何使用 angular + ui-bootstrap 来启动一个带有它自己的模板和控制器的对话框。
It sounds like you are a bit confused about the relationship between a controller and the DOM. The controller doesn't live inside the DOM, in fact, we are trying to keep the 2 things distinct. Rather, the DOM is associated with a $scope which is controlled by a... (you guessed it...) controller.
听起来您对控制器和 DOM 之间的关系有些困惑。控制器并不存在于 DOM 中，事实上，我们正试图保持两件事的不同。相反，DOM 与 $scope 相关联，该 $scope 由...（您猜对了...）控制器控制。
So, in the example, the controller is loaded when the dialog elements are added to the DOM, but, the controller isn't "opened in the dialog" in any meaningful way. The dialog could just as easily use the same controller that the main app is using, by replacing "DialogCtl"with "DemoCtl"on line 17 of the demo. What I'm trying to say is that the controller, and the dialog are independent. Dialogs aren't executing controllers, rather, they are consuming $scopemanged by one.
所以，在这个例子中，当对话框元素被添加到 DOM 时，控制器被加载，但是，控制器并没有以任何有意义的方式“在对话框中打开”。该对话框可以很容易地使用主应用程序使用同一个控制器，通过更换"DialogCtl"与"DemoCtl"上演示的第17行。我想说的是控制器和对话框是独立的。对话框不是在执行控制器，而是在消耗$scope由一个控制器管理的。
UPDATE: I just found out the example is a bit buggy, if you dismiss the dialog and then try re-opening it, the modal is displayed but not the dialog. I'm trying to sort that out now, i'm not really sure what's going on...
更新：我刚刚发现这个例子有点问题，如果你关闭对话框然后尝试重新打开它，会显示模式而不是对话框。我现在正在努力解决这个问题，我不确定发生了什么......
UPDATE 2: I think the inability to reload the dialog has to do with template caching. In this plnkryou see that I add a 'cache buster' onto the querystring, and the dialog reloads, but the modal backdrop doesn't. The example on the ui-bootstrappage can be loaded & reloaded without issue, but they are using a hard-coded template (rather than a template url). I wasn't able to get that working in plnkr either. Oh, the joys of working on the bleeding edge :-/
更新 2：我认为无法重新加载对话框与模板缓存有关。在这个 plnkr 中，您会看到我在查询字符串上添加了一个“缓存破坏者”，并且对话框重新加载，但模态背景没有。在用户界面的自举的例子页面可以加载和没有问题重新加载，但他们用的是硬编码的模板（而不是模板URL）。我也无法在 plnkr 中使用它。哦，在前沿工作的乐趣：-/
UPDATE 3: I can't figure out what's going on, but posted this question for help Opening the same dialog multiple times with $dialog
更新 3：我无法弄清楚发生了什么，但发布了这个问题以寻求帮助使用 $dialog 多次打开同一个对话框
回答by The Bndr
It seams, that the $dialogdirective is not present in the current version of ui-bootstrap. http://angular-ui.github.io/bootstrap(0.11)
它接缝，该$dialog指令不存在于当前版本的ui-bootstrap. http://angular-ui.github.io/bootstrap(0.11)
An alternative directive could be modal:
http://angular-ui.github.io/bootstrap/#/modal
另一种指令可能是modal：http:
//angular-ui.github.io/bootstrap/#/modal
Here is a Plunker to see, how it works. http://plnkr.co/edit/?p=preview
这是一个Plunker，看看它是如何工作的。 http://plnkr.co/edit/?p=preview
回答by Jijo Paulose
$mdDialog.show({
locals: {alert:"message"},
controller: DialogController,
templateUrl: 'apps/sidebar/views/dialog1.tmpl.html',
parent: angular.element(document.body),
clickOutsideToClose:true
})
