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

Question

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

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

如果您然后按“退出”以关闭背景，然后单击按钮，则会出现模态窗口。

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

感谢您的帮助。

Answer 1

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

<div ng-include="'mymodalcontent.html'"></div>

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

请注意，ng-include属性中的值必须包含单引号，以便在ng-include指令的documentation中详细说明。详细信息在名为arguments的部分中提及并建议：

  

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

中

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

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