Angular js - 从控制器调用 data-modal-target答案

【问题标题】：Angular js - calling data-modal-target from controllerAngular js - 从控制器调用 data-modal-target
【发布时间】：2017-09-29 13:30:40
【问题描述】：

我是 Angular 新手，对模态有疑问。在我的 html 中，我使用的是这样的 data-modal-target

          <li>
            <button data-modal-target='#delete-connection' ng-click="deleteConnection(cloudconnection.id)">Delete Connection</button>
          </li>

我在我的 html 中定义了一个 id 为 delete-connection 的 div，其中包含模态对话框的内容，如 OK/Cancel。上面的代码工作得很好，单击按钮时我会看到一个模式对话框。

但是现在我想从我的控制器中显示这个模式对话框。单击按钮时，我想调用控制器中的方法，在那里进行一些处理，然后有条件地显示模态对话框。显示该模式对话框的最简单方法是什么？我在其他答案中看到的一种方法是使用模板文件等定义自己的控制器。我想知道我是否可以将现有的 div 用于模态对话框并以某种方式从我的控制器启用它。我试过类似的东西 -

$('#delete-connection').modal();

但我收到一个参考错误，指出 $ 未定义。

有人可以建议我在这里应该做什么吗？

谢谢

【问题讨论】：

只是为了澄清而不是使用 data-modal-target 我在 deleteConnection 方法中添加了上面显示的“$('#delete-connection').modal()”。但这不起作用。

标签： javascript angularjs

【解决方案1】：

这是因为您没有包含 jquery 引用。

如果你需要使用 angular 方式尝试使用 angular-ui

https://angular-ui.github.io/bootstrap/#!#modal

【讨论】：

【解决方案2】：

此错误只能由以下原因之一引起：

JavaScript 文件未正确加载到您的页面中
您有一个拙劣的 jQuery 版本。这可能是因为有人编辑了核心文件，或者插件可能覆盖了 $ 变量。
您在页面完全加载之前运行了 JavaScript，因此，在 jQuery 完全加载之前。

确保所有 javascript 代码都在代码块中运行，例如：

$(document).ready(function () {
  //your code here
});

这将确保您的代码在 jQuery 初始化之后被加载。最后要检查的一件事是确保在加载 jQuery 之前没有加载任何插件。插件扩展了“$”对象，所以如果你在加载 jQuery 核心之前加载插件，那么你会得到你描述的错误。

【讨论】：