Angular - 将引导模块重新添加到 DOM答案

【问题标题】：Angular - Re-add a bootstraped module to DOMAngular - 将引导模块重新添加到 DOM
【发布时间】：2015-09-15 03:31:37
【问题描述】：

我在这里遇到了一个有趣的问题。

我正在开发一个带有内容脚本的 Chrome 扩展程序。

这个扩展旨在为页面添加一个小 div，这个 div 使用 AngularJS。（我之所以选择 Angular，是因为我希望这个 div 的数据可以通过 var 值的更改轻松更新）。

我可以添加一次 div 并引导它。所以 div 的行为很好。

但是主页（我无法控制）经常使用 Ajax 重新加载所有内容。（然后我完全无法 - 我认为 - 从某些被删除的元素中获取事件）。

我能够创建方法来检查我的元素是否仍在页面上，如果没有，则重新添加它们。 appendChildPersistent 方法负责处理它。（它等待某个元素出现在主页上。将我的元素添加到其中。添加时运行回调。继续检查元素是否仍然存在，如果没有，则重复一遍）。

所以我所有的普通元素都可以完美地工作。

但是这个有角度的 div 不能被引导第二次。

程序：

我等到某个元素出现在主页上
我使用jquery append将我自己的div myDiv从纯文本html添加到主页div
我加载 Angular 应用程序并在添加 div 时使用回调函数引导它：

代码：

var txt = '<div id="myDivId" ng-controller="myController">{{testing}}</div>';

appendChildPersistent('myDivId', MyDiv, '#theTargetMainPageDiv', function()
{
        var app = angular.module('myApp', [])
            .controller('myController', function($scope) {
                $scope.testing = 'Welcome!';
            });

        angular.bootstrap(document, ['myApp']);
});

所以，第一次添加我的 div 时，它就可以工作了。角度变量和指令有效（在此示例中，div 显示“欢迎！”）。但第二次，我得到一个“已经引导”的错误。（但如果我不再尝试引导，div 将变成纯文本，没有角度行为，显示“{{testing}}”而不是“欢迎！”）。

有没有办法取消引导、重做引导或我可以解决这个问题的其他方法？

【问题讨论】：

您引导整个文档。你必须引导你的 div。
好的！！！如果您介意将其添加为答案，它将被接受:)
“我能够创建方法来检查我的元素是否仍在页面上，如果没有，则重新添加它们。” 考虑使用类似 mutation-summary 的方法为此。
谢谢，@Xan，但与我设法做的相比，这将相当复杂，因为它是一种矫枉过正。我把它做得很简单here - 我知道尝试将许多元素添加到同一个目标时可能会出现问题，但它很容易解决。
这是一个不完美的解决方案，因为基于轮询的检测总是有可能延迟直到检测到某些东西，并且大多数轮询可能只是浪费 CPU 周期。

标签： angularjs dom google-chrome-extension content-script

【解决方案1】：

您的应用程序只关注您插入的 div。您可以让 Angular 应用程序在页面的某个区域运行，而不是覆盖整个文档。只需将 DOM 元素传递给bootstrap 函数：

angular.bootstrap(myDiv, ['myApp']);

这样 Angular 只在您的 div 中运行，并且您可以在每次添加新 div 时引导应用程序。

【讨论】：