Jquery Modal弹出窗口中的Angularjs Scope

Posted 2023-05-07

【中文标题】Jquery Modal弹出窗口中的Angularjs Scope

【英文标题】：Angularjs Scope in Jquery Modal popup

【发布时间】：2016-05-27 21:41:50

【问题描述】：

带有 jquery 的 js 1.3。 我必须在模式窗口中显示表单输入。为此我编写了一个 jquery 函数，它将在 Modal 窗口中打开隐藏的 dom 内容。

ShowModal.open(
    content: $(".modal_content").html(), //Get html content form dom
)

模态代码运行良好。问题是模态没有获得控制器的范围。我正在为控制器使用“Controller As”语法：

function controller()
    bindVm = this;
    bindVm.data = ["Hello", "World"]

在模态窗口中

<div ng-controller="controller as bindVm">
    <div class="modal_content"> bindVm.data[0]</div>
</div>

控制器的代码在普通页面上工作正常，但在模态窗口中不工作。

注意：我还使用 $compile 附加 html 内容

$modalContent.html($compile($modal_content)($scope));

还是不行。有人得到了什么。

【参考方案1】：

在模态中，您需要解析变量或范围并传递给模态控制器，然后您可以开始使用它们检查这里Angular-UI Modal resolve

Pass parameter to modal

【讨论】：

我没有使用 Angular-UI。我用 jquery 创建了我自己的自定义模态函数。仔细阅读问题。

【参考方案2】：

问题已解决。使用 $templateCache 获取模板并将数据附加到 $scope 而不是 bindVm 别名。

html:

<script type="text/ng-template" id="template1.html">
    <div class="modal_content"> data[0]</div>
</script>

JS：

$modalContent.html($compile($templateCache.get('template1.html'))($scope));

现在工作。