模态窗口内的Angular JS ng-click /在模态回调中刷新角度范围答案

【问题标题】：Angular JS ng-click inside a modal window / Refresh angular scope in modal callback模态窗口内的Angular JS ng-click /在模态回调中刷新角度范围
【发布时间】：2015-01-07 18:23:55
【问题描述】：

我正在使用 magnific popup 将模式窗口加载到我的 html 中，这实际上是这样做的：

<html ng-app='basket'>
    <body ng-controller='BasketController as basket'>

        <a id='open' href='/product/1'>Open modal</a>
        <a ng-click='addToCart(1)'>Add to cart</a>
    </body>
</html>

... Ajax 加载后

<html ng-app='basket'>
    <body ng-controller='BasketController as basket'>

        <div class='modal>
            <h1>Product title</h1>
            <a ng-click='addToCart(1)'>Add to cart</a>
        </div>

        <a id='open' href='/product/1'>Open modal</a>
        <a ng-click='addToCart(1)'>Add to cart</a>
    </body>
</html>

但是模态框内的ng-click 不会触发。 有没有办法可以刷新包含模式内容的范围？

首先，我想我可以通过向打开模式按钮添加 ng-click 来尝试一下，该按钮可以将范围传递给打开模式的另一个函数。我有一个函数可以在加载后对$scope 进行控制台记录，但我只需要刷新或其他东西来让 Angular 识别模态窗口中的新 html。

【问题讨论】：

我需要查看加载模式的代码。您可以潜在地 $digest html，但这不是必需的。最好的解决方案是使用适当的 angular-ui 模态，例如角模态-github.com/btford/angular-modal。这将为您提供您需要的工具（例如提供控制器）以使点击正常工作。

标签： angularjs magnific-popup

【解决方案1】：

这不起作用的原因是 angularJS 不知道模态框内的 ng-click。从外观上看，它是由 jQuery 添加的。 AngularJS 没有处理那个 HTMl 并且 ng-click 什么都不做。

但是，您可以潜在地使用 AngularJS 中的 $compile 函数来 $compile 具有特定范围的模态 HTML。然后，ng-click 将起作用。

在此处阅读有关 $compile 的信息：

https://docs.angularjs.org/api/ng/service/$compile

所以你的例子可能是：

$compile(modalElement)($scope);

这发生在 BasketController 内部，因此将传入 BasketController 来管理 modalElement - 原始 DOM 元素，而不是 jQuery 元素。

所以在某些时候，如果您可以访问模态 html（在加载后），您可以这样做。不过完全不推荐！使用 Angular 库。

【讨论】：

点了！只是我正在接手一份已经设置了很多功能的工作，所以当我解决所有问题时，我只需要尽快完成一些里程碑。实际上，我只是——这可能是一个比你自己更不推荐的解决方案——只是在模态的加载回调中为模态按钮添加了一个侦听器，当单击它时，会在范围内找到原始按钮，并在其上触发一个单击事件！我想在某个阶段，我会用你提到的 Angular 版本替换所有模式。
这在短期内听起来还不错......不过祝你好运:)