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

Question

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

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

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

我可以添加一次 div 和 bootstrap。所以 div 的行为很好。

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

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

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

但是这个 angular div 不能 bootstrap 第二次编辑。

程序：

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

代码：

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 时，它起作用了。 angular 变量和指令有效（在本例中，div 显示 "Welcome!"）。但是第二次，我收到 "already bootstrapped" 错误。（但如果我不再尝试 bootstrap，div 将变成纯文本，没有 angular 行为，显示“{{testing}}”而不是 "Welcome!"） .

有没有办法解除、重做 bootstrap 或其他我可以解决这个问题的方法？

Answer 1

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

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

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

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

Angular - Re-add a bootstraped module to DOM

dom

google-chrome-extension

content-script

angularjs