Question

我有一个Google Chrome扩展程序，可以在网站的指定页面上注入内容脚本。此内容脚本替换绑定到按钮的操作。单击该按钮时，会添加一些HTML元素（基础弹出窗口）。我想使用Angular来管理我添加到页面的弹出窗口。我可以这样做吗？

以下是单击按钮时可以添加的示例HTML代码。

<div ng-app="MyApp">
    <div ng-controller="MyCtrl as ctrl">
        <p> {{ctrl.sayHello()}} </p>
    </div>
</div>

这会有用吗？（我还没有让它工作，但我还在尝试）如果它有效，如果该页面已经包含另一个Angular应用程序该怎么办？

HTML插入后，HTML可能如下所示：

<html ng-app="PageApp">
    <body ng-controller="PageCtrl">
        ...
        ...
        <div ng-app="MyApp">
            <div ng-controller="MyCtrl">
                ...
            </div>
        </div>
    </body>
</html>

修改：我找到了angular.bootstrap()。所以我可以在给定的DOM元素（我的div）上启动Angular模块。我认为这可能是一个很好的解决方案。如果Angular已经尝试加载ng-app指令并且失败了，我还可以使用它吗？因为在注入Angular代码并尝试加载未为我定义的PageApp时肯定会发生这种情况。

Answer 1

@estus说的是正确的，并回答了您的问题。您的代码无效，因为“[you] can't have nested Angular apps”，换句话说an Angular app cannot have another Angular app inside of it，无论您是否有权访问到源（你可能会这样做，因为你正在注入代码）。

<强>建议

更激进，但请注意，如果忽略属性绑定，大多数（如果不是全部）AngularJS的功能可以很容易地移植到vanilla JavaScript。您可能需要编写更具体和手动的代码，但这样可以减少任何与角度相关的问题。
有hackish workaround可能允许您嵌套一些Angular应用程序，但这也需要访问您注入代码的页面源，以及一些疯狂的DOM搜索和操作，可能效率不高。

Angular在内容脚本中是否可用

1 个答案: