Code Highlighting in PHPStorm/WebStorm for Angularjs

Question

In my controller, I have a function defined as:

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

The IDE (via code highlighting) reports categoryName() as being used and isCategorySet() as unused.

This is kind of understandable, since:

categoryName() is used inside {{ }} in the html file:

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

and isCategorySet() is used in an ng-if string:

ng-if="productListingHeader.isCategorySet()"

Given that this is such a common usage, I suspect I may be missing a setting in Storm as to how to set things up so that this type of usage (inside a string) by an Angular directive gets picked up as "used".

Thanks in advance for any feedback.

Answer 1

That's normal behavior for PHP/WebStorm.

Template -> JavaScript is really just an ambiguous connection. There is no support for jsDoc type inferring in the AngularJS templates. So PHP/WebStorm will match a template function call to JavaScript if only that function name is unique.

PHP/WebStorm have issues inferring closure methods as object functions. I've had better success using prototype declaration for AngularJS controllers.

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());
};

Compare the above code with your code, and look at the structure explore in WebStorm. When you use prototypes for controllers they appear in the explorer properly.