在Webstorm / PHPStorm中获取angularJS自动完成功能

How do I get auto-complete for angularjs syntax in strings. For example:

如何在字符串中获得angularjs语法的自动完成功能。例如:

myscript.js

var List = function ($scope) {
    $scope.names = [
        "Ahmed",
        "Tom",
        "David",
        "Jessie"
    ];
};

HTML

<div>
    <label for="get_name">
        Find your name:
        <input type="search" name="search" id="search" ng-model="search"/>
    </label>
</div>

<div ng-controller="List">
    <ul>
        <li ng-repeat="name in names | filter:search">{{ name }}</li>
    </ul>
</div>

<script type="text/javascript" src="angular_1.0.7.js"></script>
<script type="text/javascript" src="myscript.js"></script>

This is basically a way to search to names. How do I get auto-complete to appear inside <li ng-repeat="name in names | filter:search">{{ name }}</li> inside ng-repeat.

这基本上是一种搜索名称的方法。如何在ng-repeat内的

{{name}} 内显示自动完成。

I am using PHPStorm 6.0.3.

我正在使用PHPStorm 6.0.3。

4 个解决方案

#1

If you don't already have angular set up, go to Preferences > Project Settings > Javascript > Libraries and add your version of angular.

如果您还没有设置角度,请转到“首选项”>“项目设置”>“Javascript”>“库”,然后添加角度版本。

As for autocomplete in html strings, I don't think that's going to happen with the current version of PHPStorm, but in most other places, it should do the trick.

至于html字符串中的自动完成,我不认为PHPStorm的当前版本会发生这种情况,但在大多数其他地方,它应该可以解决问题。

#2

You can use awesome AngularJS plugin from John Lindquist. http://plugins.jetbrains.com/plugin/6971

您可以使用John Lindquist的精彩AngularJS插件。 http://plugins.jetbrains.com/plugin/6971

#3

I've finally got it to work by following this tutorial from JetBrains' blog.

我终于通过JetBrains博客上的这个教程开始工作了。

Short answer:

You have two options to enable AngularJS autocomplete:

您有两个选项可以启用AngularJS自动完成功能:

Download angular source code and put the file into a folder inside your project. (it wasn't working form me because I was using it direct from a CDN).

下载角度源代码并将文件放入项目内的文件夹中。 (它不是我的工作,因为我直接从CDN使用它)。
If using a CDN, you must go to Project Settings | JavaScript | Libraries | Download, then select TypeScript community stub from the select box on top left, find angularjs and angular-ui on the list, then Download and install.

如果使用CDN,则必须转到“项目设置”| JavaScript |图书馆|单击下载,然后从左上角的选择框中选择TypeScript社区存根,在列表中找到angularjs和angular-ui,然后单击下载并安装。

Restart IDE. Be happy.

重新启动IDE。要开心。

#4

In my case installing angular library didn't work. It was the angular plugin that did the trick. According to this video, install the angular plugin and restart your IDE. For latest versions, you go to

在我的情况下安装角度库不起作用。这是一个角色插件。根据此视频,安装angular插件并重新启动IDE。对于最新版本,你去

File -> Settings -> Plugins -> Install JetBrains Plugin -> Search for the plugin, select and install.

文件 - >设置 - >插件 - >安装JetBrains插件 - >搜索插件,选择并安装。

Finally, restart your IDE. You can test it by creating a div and typing ng- and you'll see all the suggestions.

最后,重新启动IDE。您可以通过创建div并键入ng-来测试它,您将看到所有建议。

Hope this helps.

希望这可以帮助。

#1