AngularJS中的模态窗口在第一次单击时不会打开

Ala*_*age 1 angular-ui-bootstrap

请参阅plunkr代码,演示我在AngularJS中使用模态服务时遇到的问题.

基本上,我已经将模态窗口的HTML内容移动到一个单独的文件中,现在当单击按钮时出现背景但是模态窗口没有 - 在第一次单击时.

如果您然后按"退出"以关闭背景,然后单击按钮,将出现模态窗口.

我假设这是因为我第一次单击按钮时没有加载文件 - 但如果是这样,我如何使用templateUrl属性使我能够将模态窗口的内容存储在单独的文件中?

感谢您的帮助.

Ala*_*age 6

该问题似乎是由于在第一次点击发生时尚未下载的templateUrl中指定的单独文件,我现在能够通过在index.html文件中添加以下行来计算解决方案:

<div ng-include="'mymodalcontent.html'"></div>
Run Code Online (Sandbox Code Playgroud)

该指令添加了对加载templateUrl的文件的引用,以便在单击按钮时第一次模态窗口按预期显示.

请注意,ng-include属性中的值必须具有单引号才能按照ng-include指令的文档中的详细说明进行操作.这个细节在名为arguments的部分中提到并建议:

如果源是字符串常量,请确保将其包装在引号中

我更新了plunkr代码以包含修复程序.

唯一的缺点是将模态窗口内容移动到单独文件背后的最初目的是仅在用户单击按钮时下载内容,从而为在移动设备上访问该站点的用户节省带宽.