template: unresolved variable or type $ctrl

user_1075289 0
Viewed 3576

How to tell PhpStorm/WebStorm that $ctrl in a template is known and also help it decide the controller it belongs to (maybe using jsdoc)?

I create components in this manner in Angular 1.5:

angular
    .module('myModule')
    .component('myComponent', {
        templateUrl: "my.component.html",
        controller : [
            MyComponentController
        ]
    });

ControllerAs didn't help...

HTML snippet of where the problem appears ($ctrl.*):

<div class="entity-summary clear" ng-click="$ctrl.toggleInfo()"> 
  <div class="entity-col">
    {{$ctrl.entity.id}}
  </div>
  <div class="entity-col">
    {{$ctrl.entity.host}}
  </div> 
</div>
angularjs-components angularjs webstorm phpstorm
4 Answers

I found a not that bad workaround.

Condition

You have to use at least ES2016.

If you have a component like this:

export class MyComponent {

}

export const MyComponentController = {
  controller: MyComponent,
  templateUrl: require('./my-component.html')
};

you can simple add the following line:

module.$ctrl = MyComponent;

Then WebStorm is able to resolve $ctrl in the template. The intellisense/autocomplete is unfortunately still not working .

user_85695190
Related