AngularJS - 在对话框中打开控制器(动态加载模板) [英] AngularJS - open controller in a dialog (template loaded dynamically)

问题描述

我在玩 AngularJS.我正在使用控制器和 templateUrl 来自动完成工作:)目前布局只有 <div ng-view></div> 指令，所有东西都加载到其中.

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.

我想打开模态(Bootstrap 或 jQuery UI，无关紧要)并加载那里(在模态的主体内)给定的控制器链接.

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.

就像我的主 ng-view 中的每个链接打开"(加载模板并执行所有 DOM 编译和链接)一样，我希望其中的一些链接打开模态.

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.

我已经查看了 AngularStrap 和 Angular-UI Bootstrap 提供的功能，但它们都没有我想要的.

I've checked out what AngularStrap and Angular-UI Bootstrap has to offer, and neither of them has what I'm looking for.

AngularStrap 可以获取新的部分模板，但不执行新的控制器.

AngularStrap can obtain new partial template, but doesn't execute the new controller.

是否有任何解决方案/代码片段可以在 Modal/Dialog 中执行第二个控制器?

Is there any solution / snippet that executes the second controller inside Modal/Dialog?

推荐答案

这里有一个 plnkr 演示如何使用 angular + ui-bootstrap 启动一个带有自己的模板和控制器的对话框.

Here's a plnkr that demonstrates using the angular + ui-bootstrap to launch a dialog with it's own template and controller.

听起来您对控制器和 DOM 之间的关系有些困惑.控制器并不存在于 DOM 中，事实上，我们正试图保持两件事的不同.相反，DOM 与 $scope 相关联，该 $scope 由...(您猜对了...)控制器控制.

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 时加载控制器，但是，控制器并没有以任何有意义的方式在对话框中打开".通过在演示的第 17 行将 "DialogCtl" 替换为 "DemoCtl"，对话框可以轻松地使用主应用程序正在使用的相同控制器.我想说的是控制器和对话框是独立的.对话框不执行控制器，而是使用由一个管理器管理的 $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 $scope manged by one.

更新:我刚刚发现这个例子有点问题，如果你关闭对话框然后尝试重新打开它，会显示模态但不显示对话框.我现在正在努力解决这个问题，我不确定发生了什么......

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...

更新 2:我认为无法重新加载对话框与模板缓存有关.在 this plnkr 中，您会看到我在查询字符串中添加了缓存破坏者"，并且对话框重新加载，但模态背景没有.可以加载 ui-bootstrap 页面上的示例重新加载没有问题，但他们使用的是硬编码模板(而不是模板 url).我也无法在 plnkr 中使用它.哦，在前沿工作的乐趣:-/

UPDATE 2: I think the inability to reload the dialog has to do with template caching. In this plnkr you 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-bootstrap page 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 :-/

更新 3:我不知道发生了什么，但发布了这个问题寻求帮助 使用 $dialog 多次打开同一个对话框

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

这篇关于AngularJS - 在对话框中打开控制器(动态加载模板)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！