Question

我用angularjs和bootstrap做了一个小的chrome扩展。我有这样的提醒：

<div class="alert alert-danger" role="alert" ng-show="errorMailZR">error</div>

并在angularjs控制器中：

$scope.errorMailZR = false;

我说它是假的，因为我默认看到警报，它没有被隐藏：/但是当我用浏览器继续浏览它时，一切都正常。那么，我需要它在chrome扩展中的作用？

纳克放映=＆＃34;假＆＃34;在Chrome扩展程序中也不起作用......

Answer 1

UPDATE：

https://docs.angularjs.org/api/ng/directive/ngCsp#！

要在扩展页面上运行角度，您必须使用ng-csp指令，或满足ng-csp策略。我假设你已经完成了这项任务，或者根本没有任何工作。

这样做会关闭内联样式插入，特别是angular.js中的这一行（显示供参考，不作修改！）：

!window.angular.$$csp().noInlineStyle && window.angular.element(document.head).prepend('<style type="text/css">@charset "UTF-8";[ng\\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng\\:form{display:block;}.ng-animate-shim{visibility:hidden;}.ng-anchor{position:absolute;}</style>');

要获取依赖于ng-hide，ng-animate，ng-cloak等类的指令，请使用以下方法手动链接到类：

<link rel="stylesheet" href="path/to/angular/angular-csp.css">

这就是它的全部内容。

OLD HACKY STUFF

立即修复，将其添加到您的文档头：

<style type="text/css">@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng\:form{display:block;}.ng-animate-shim{visibility:hidden;}.ng-anchor{position:absolute;}</style>

Ng-通过角度显示和隐藏工作，将类ng-hide添加到隐藏的项目中，并在显示时将其删除。

为什么它不能用于扩展？好问题。无论出于何种原因（当我找到原因时会更新）chrome扩展会阻止将样式标记添加到头部。这可能是某种安全问题，并且可能有一种关闭安全位的方法，当我发现更多时，我会更新。

Answer 2

您可以在chrome中调试chrome扩展程序，只需在扩展程序弹出窗口中单击鼠标右键即可。我的猜测是你的扩展中没有加载或引导angularjs，根据我的经验，你应该从本地文件加载角度而不是CDN

ng-show和ng-hide在chrome扩展中不起作用

2 个答案:

UPDATE：

OLD HACKY STUFF