Question

假设我的页面上有一个区域如下：

<ul>
    <li id="li_1" ng-controller="FooBarCtrl as foobar" ng-init="setup_stuff(1)">
       <button id="button_1" ng-click="foobar.doButtonyThings">Weeeeeeee!</button>
    </li>
    <li id="li_2" ng-controller="FooBarCtrl as foobar" ng-init="setup_stuff(2)">
        <button id="button_2" ng-click="foobar.doButtonyThings">Weeeeeeee!</button>
    </li>
</ul>

每个列表项都需要有自己的对象关联。

现在，在一些javascript文件中说我想在此列表中添加另一个列表项。我可以看出列表中的下一个“索引”是3，所以我在javascript中进行了所有元素更改，然后将其附加到列表中。

这是有效的，并且附加了元素，并且当附加元素时，DOM中的所有HTML看起来都很好。

<ul>
    <li id="li_1" ng-controller="FooBarCtrl as foobar" ng-init="setup_stuff(1)">
       <button id="button_1" ng-click="foobar.doButtonyThings(1)">Weeeeeeee!</button>
    </li>
    <li id="li_2" ng-controller="FooBarCtrl as foobar" ng-init="setup_stuff(2)">
        <button id="button_2" ng-click="foobar.doButtonyThings(2)">Weeeeeeee!</button>
    </li>
    <li id="li_3" ng-controller="FooBarCtrl as foobar" ng-init="setup_stuff(3)">
        <button id="button_3" ng-click="foobar.doButtonyThings(3)">Weeeeeeee!</button>
    </li>
</ul>

我面临的问题是，虽然HTML看起来是正确的，但新元素的角度实际上并没有“连接”。换句话说，没有角度适用于附加元素。对于前两个，因为它们在页面加载时，单击它们各自的按钮将调用doButtonyThings（）函数。但对于附加元素，没有任何反应。

不幸的是重组代码，以便外部javascript文件中不会发生追加，这是我无法控制的，所以我需要弄清楚如何让它以这种方式工作，即使不是最佳实践。

我需要采取一些额外步骤来“连接”附加元素，以便角度与它们一起工作吗？

编辑：

这是用于向列表添加“行”的逻辑。我在DOM中有一个隐藏的模板列表项，用于附加新的列表项。这是实际代码，因此它不会真正与上面的foo bar相关联。

注意：这是不是角度控制代码。这是香草javascript。

addLine:function(lineNumber)
{
    var lineTemplate = document.getElementsByClassName('template__line')[0];
    var newLine = lineTemplate.cloneNode(true);

    //replace template sections
    newLine.className = 'clearfix ng-scope';
    newLine.innerHTML = newLine.innerHTML.replace(/__lineNumber__/g, lineNumber.toString());
    newLine.style.display = 'block';
    document.getElementById('quick-order__body').appendChild(newLine);
}

Answer 1

当你附加包含指令的新html（例如ng-click）时，你需要使用$ compile服务（你需要注入）来让Angular知道它：

 $compile(element.contents())(scope);

我们需要您的一些JavaScript代码继续为您的用例提供更具体的示例。可能你最好使用一个数组，你用ng-repeat迭代来吐出你的html。这样，当通过添加/删除更改数组时，html将自动更新。

为什么AngularJS不能处理页面加载后附加到页面的元素？

1 个答案: