PHPStorm/WebStorm 中 Angularjs 的代码突出显示

Question

在我的控制器中，我定义了一个函数：

var ProductListingHeaderController = function (FilterService, CategoryService) {
    this.isCategorySet = function () {
        return (FilterService.categoryID);
    };
    this.categoryName = function () {
        return (CategoryService.categoryName());
    };
};

IDE（通过代码突出显示）报告 categoryName() 正在使用，而 isCategorySet() 未使用。

这是可以理解的，因为：

categoryName() 在 html 文件中的 {{ }} 中使用：

<h2>{{productListingHeader.categoryName()}}</h2>

并且 isCategorySet() 在 ng-if 字符串中使用：

ng-if="productListingHeader.isCategorySet()"

鉴于这是如此常见的用法，我怀疑我可能在 Storm 中遗漏了一个关于如何设置的设置，以便 Angular 指令的这种用法（在字符串中）被选为 "used".

提前感谢您的任何反馈。

Answer 1

这是 PHP/WebStorm 的正常行为。

Template -> JavaScript 实际上只是一个模棱两可的联系。 AngularJS 模板中不支持 jsDoc 类型推断。因此 PHP/WebStorm 将匹配对 JavaScript 的模板函数调用，前提是该函数名称是唯一的。

PHP/WebStorm 在将闭包方法推断为对象函数时存在问题。我使用 AngularJS 控制器的原型声明取得了更大的成功。

var ProductListingHeaderController = function (FilterService, CategoryService) {
    this.filterService = FilterService;
    this.categoryService = CategoryService;
}
ProductListingHeaderController.prototype.isCategorySet = function () {
    return (this.filterService.categoryID);
};
ProductListingHeaderController.prototype.categoryName = function () {
    return (this.categoryService.categoryName());
};

将上面的代码与你的代码进行比较，看看WebStorm中探索的结构。当您为控制器使用原型时，它们会正确显示在资源管理器中。

PHPStorm/WebStorm 中 Angularjs 的代码突出显示

Code Highlighting in PHPStorm/WebStorm for Angularjs

phpstorm

webstorm

angularjs