模态窗口内的角度 JS ng-单击/在模态回调中刷新角度范围

我正在使用 magnific 弹出窗口将模态窗口加载到我的 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，但我只需要刷新或其他东西来使角度识别模态窗口中的新 html。

这不起作用的原因是因为 angularJS 不知道模态内的 ng-click。它是由jQuery添加的。AngularJS尚未处理HTMl和ng-click不执行任何操作。

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

在这里阅读有关$compile的信息：

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

因此，在您的案例中，一个例子可能是：

$compile(modalElement)($scope);

这发生在 BasketController 中，所以这将是 BasketController 传入来管理 modalElement - 原始 DOM 元素，而不是 jQuery 元素。

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

相关内容

最新更新

热门标签：