为什么 AngularJS 指令（属性等）在 WebStorm 8 中显示为“无效”？答案

【问题标题】：Why do AngularJS directives (attributes, etc.) show up as "invalid" in WebStorm 8?为什么 AngularJS 指令（属性等）在 WebStorm 8 中显示为“无效”？
【发布时间】：2017-08-18 03:14:39
【问题描述】：

我几个小时前刚刚安装了 WebStorm 8。我一直在写一些 AngularJS 的东西，我有一个相当烦人的小问题。 AngularJS 插件似乎可以部分工作，每当我键入 ng- 时，我都会看到一个智能感知弹出窗口，其中显示了所有各种 ng-* 属性。然而，这就是事情停止工作的地方。我似乎没有在 .js 文件或 .html 文件中获得更高级的智能感知功能。如果我在 app.js 中创建一个名为“app”的 Angular 模块，那么当我在 HTML 文件中键入 ng-app= 时，“app”不会出现。此外，WebStorm 在编辑 html 文件时将所有 ng-* 属性突出显示为无效 html。其他 angularjs 功能似乎也不起作用。例如，我在绑定中没有任何智能感知。

我在这里找到了一些关于 SO 的主题，表明我可能需要在项目设置中将 AngularJS 添加为 JavaScript 库......但是关于如何正确执行此操作的说明为零。 SO 上的主题非常简短，并且链接到 WebStorm 文档，该文档非常笼统，没有任何细节。究竟如何将 AngularJS 设置为 WebStorm 中的 JS 库？这真的有必要吗？

我应该注意到 AngularJS 确实作为插件出现在 WebStorm 的设置中，并且它已被选中。我基本上只有 ng-* 属性 intellisense，但我没有得到 WebStorm 8 应该附带的其他 AngularJS 增强支持。我已经完全安装和卸载了 webstorm 几次。不太确定从这里去哪里......

【问题讨论】：

标签： angularjs intellisense webstorm

【解决方案1】：

要将 Angular JS 添加为项目库，请转到

Preferences > Project Settings > JavaScript > Libraries > Add

然后选择要添加的Angular目录。

我使用的是 Mac，但 windows 应该大致相似。

你也可以这样做

ctrl/cmd + shift + a

（去任何地方）并键入库以到达同一个地方。

注意：我在我的主 html 文件中通过 https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js 引用了 Angular，它可以在不将其添加为库的情况下工作。

编辑：

来自 Webstorm 博客：如果您更喜欢使用 CDN，请将光标放在突出显示的库名称上，按 Alt+Enter，然后下载库。这将在 WebStorm 的缓存中（不在您的项目中）设置一个本地库，以便 WebStorm 可以访问 AngularJS 方法、指令等以进行自动完成和文档查找。

【讨论】：

我确实从 CDN 中引用了它，所以我认为这是问题的一部分。我最终不得不删除我项目中的所有内容，并重新创建它，以便在本地下载 Angular 后真正让所有内容正确连接。有些事情似乎仍然无法正常工作……例如，通过ng-controller="MyCtrl as my" 和通过my.whatever 引用范围似乎无法与智能感知一起正常工作，有时甚至在运行时也无法正常工作。我已经恢复为只使用ng-controller="MyCtrl" 和直接绑定模型等等，没有虚拟命名空间。
它仍然是一个相对较新的功能，因此可能存在一些错误。
是的，我认为可能仍然存在一些错误。它现在工作得很好，我可以应付大多数事情，而且我对 Angular 还是比较陌生，所以我不是一个每小时能写几千行代码的强者，需要一个完美的功能智能感知系统。
我也有同样的问题，但我使用的是 Ionic 和 IntelliJ，我可以添加相同的库而不破坏项目吗？

【解决方案2】：

还要确保你有 jebrains AngularJS 插件

【讨论】：

【解决方案3】：

您是否在 HTML 中从 CDN 引用 AngularJS？如果是这样，只需下载 Angular 并在您的 HTML 中引用本地副本。然后角度特征应该开始工作。或者，我认为您可以在 html 中单击 angular CDN 的路径，按 Alt+Enter 并选择下载库之类的内容。

【讨论】：

重要！确保您已配置为库（或添加到项目中）的 angula.js 是 UNCOMPRESSED 调试版本。如果使用缩小版，Intellisence 将不起作用
谢谢，我确实从 CDN 中引用了它。我认为这是问题的一部分。

【解决方案4】：

为了在 IntelliJ 中解决这个问题，我下载了 angular 库。

这些是步骤。

要为您使用的库或框架添加 TypeScript 定义文件，请转到首选项 |语言和框架 | JavaScript |库 - 点击下载并通过输入其名称搜索您需要的库，然后再次点击下载。

【讨论】：