Question

我正在处理一个遗留的Web应用程序（好吧，我说遗产，它是大约一年前的，并在Knockout和JQuery中编程），我想编写一个新的Angular中的接口，我们继续使用Angular替换应用程序的所有其他部分，因为这是一个非常复杂的用户界面，不足以保证完全重写。

我想将Angular代码与现有代码库集成，对于我的第一个控制器，我想编写一个允许用户修改某些数据的弹出框。我创建了一个带有data-ng-controller＆＃34; MyController＆＃34;的div。这一切都运作良好，但我似乎无法创造出很多。

如果我们有多个控制器，即：

<div data-ng-controller="MyController">
</div>
<div data-ng-controller="MyController">
</div>

MyController的两个实例都有自己的范围，这绝对是想要的，而且这种方式对我的应用程序来说完全正常。但不幸的是，我的系统正在为弹出框的每个实例克隆一个div：

<div data-ng-controller="MyController" id="myWindow">
</div>

<script>
    function showWindow()
    {
        var dialog = $("myWindow").clone();
        dialog.show();
    )
</script>

当调用showWIndow()时，对MyController的引用似乎随之而来，所以我不会得到两个MyController实例。

我似乎无法找到如何创建同一控制器的多个实例并将其附加。

例如，我认为这可行：

<div id="myWindow">
</div>

<script>
    function showWindow()
    {
        var dialog = $("myWindow").clone().setupDialog();
        dialog.attr("data-ng-controller", "MyController");
        dialog.show();
    )
</script>

但不幸的是，MyController中的断点永远不会被击中。我怀疑这可能是由于附加的顺序，但是反转对attr（）和show的调用没有效果：

var dialog = $("myWindow").clone().setupDialog();
dialog.show();
dialog.attr("data-ng-controller", "MyController");

我假设角度库中的某些方法允许我实例化控制器并将其附加到元素。大约一个小时的谷歌搜索没有产生任何东西，但我不能相信这样的东西在某个地方不存在。

Answer 1

HTML必须编译才能使角度指令有效。

通常编译步骤由幕后角度（ng-app，bootstrap）完成。例如，当通过迭代创建新模板时，Ng-repeat会执行此操作。

但是在这里，angularJS并不“知道”你有DOM节点要编译，你必须手动完成。

你必须学习有关角度的编译，这里是文档：

reference api for $compile（本页的最后一个例子是对我帮助最大的一个例子）
reference guide for compiling on angular

以下是您可能需要做的事情（不确定，因为我对此并不了解）：

为您的重复小部件创建范围
编译模板（其中指令和表达式的角度看dom标记）
将已编译的模板链接到创建的范围

Answer 2

我想我已经找到了，但我不知道这是否是正确的做法。

我首先从data-ng-app property元素中删除了<body>。然后我以编程方式应用data-ng-controller并调用angular.bootstrap来指定我想要链接到元素的模块：

function showWindow()
{
    var dialog = $("myWindow")
        .clone()
        .attr("data-ng-controller", "MyController")
        .setupDialog();

    angular.bootstrap(dialog, ["MyModule"]);

    dialog.show();
)

这对我来说当然有用，虽然我不确定这样做是否会产生副作用，直到后来才会显现出来。

如何将Angular与现有的大量使用克隆的JavaScript体系结构相集成？

2 个答案: