Angular JS ng-click inside a modal window / Refresh angular scope in modal callback

Question

我正在使用 magnific popup 将模式 window 加载到我的 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 在模态 window 中识别新的 html .

Answer 1

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

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

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

https://docs.angularjs.org/api/ng/service/$编译

所以您的例子可能是：

$compile(modalElement)($scope);

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

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

Angular JS ng-click inside a modal window / Refresh angular scope in modal callback

Angular JS ng-click inside a modal window / Refresh angular scope in modal callback

angularjs

magnific-popup