gpt4 book ai didi

javascript - Angular 在内容脚本中可用吗

转载 作者:行者123 更新时间:2023-11-30 16:41:40 24 4
gpt4 key购买 nike

我有一个 Google Chrome 扩展程序,可以在网站的给定页面上注入(inject)内容脚本。此内容脚本替换绑定(bind)到按钮的操作。单击该按钮时,会添加一些 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 指令但失败了,我还能使用它吗?因为在注入(inject) Angular 代码并尝试加载未为我定义的 PageApp 时肯定会发生这种情况。

最佳答案

什么 @estus说的是对的,回答了你的问题。您的代码将不起作用,因为“[you] can't have nested Angular apps ”,换句话说 an Angular app cannot have another Angular app inside of it ,无论您是否有权访问源代码(您可能会这样做,因为您正在注入(inject)代码)。

建议

  • 更激进,但请注意,如果您忽略属性绑定(bind),即使不是所有 AngularJS 的功能,也可以很容易地移植到普通 JavaScript 中。您可能需要编写更具体和手动的代码,但这会消除任何与 Angular 相关的问题。
  • 有一个hackish workaround这可能允许您嵌套一些 Angular 应用程序,但这也需要访问您正在注入(inject)代码的页面的源代码,以及一些疯狂的 DOM 搜索和操作,这可能不会太有效。

关于javascript - Angular 在内容脚本中可用吗,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31880293/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com