Question

我在这里面临一个有趣的问题。

我正在使用内容脚本开发Chrome扩展程序。

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

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

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

我能够创建方法来检查我的元素是否仍在页面上，如果没有，则再次添加它们。 appendChildPersistent方法负责处理它。（它等待某个元素出现在主页面上。添加我的元素。添加时运行回调。继续检查元素是否仍在那里，如果没有，重复全部）。

所以我所有的普通元素都能很好地运作。

但这个角度div不能再次引导。

程序：

我等到主页上出现某个元素
我使用myDiv从纯文本html将我自己的div jquery append添加到主页div
我添加了角度应用程序并在添加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时，它可以工作。角度vars和指令工作（在这个例子中，div显示“欢迎！”）。但第二次，我得到一个“已经引导”的错误。（但是如果我不再尝试引导，则div变为纯文本，没有角度行为，显示“{{testing}}”而不是“Welcome！”。

有没有办法解压缩，重做引导程序或其他方法我可以解决这个问题？

Answer 1

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

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

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

Angular - 将自举模块重新添加到DOM

1 个答案: