template: unresolved variable or type $ctrl

Question

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>

Paste

Normally the IDE should know this. What does the controller usage in template look like? Code snippets would be helpful – Imalda

@Imalda <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> here it is. (code snippets don't work in comments :( ) Your help will much appreciated. :) – Iniquity

yes that's the code snippet. I dared to update the question with your piece @doroshko. ;) – Paste

hope that @Imalda could help us – Iniquity

At Jetbrains they've managed to get some time for AngularJS maintenance. Finally the fix is in 2018.3 EAP! youtrack.jetbrains.com/issue/WEB-26886 – Kirit

Answer 1

Unfortunately Angular 1.5 components are not yet fully supported, please follow WEB-20339 for updates

Imalda

the fix is in 2018.3 EAP! youtrack.jetbrains.com/issue/WEB-26886 – Kirit

Answer 2

You can avoid most of the noise by (mis)using ng-init="$ctrl=$ctrl":

<div ng-init="$ctrl=$ctrl"         
     ng-click="$ctrl.toggleInfo()"
     class="entity-summary clear" > 
  <div class="entity-col">
    {{$ctrl.entity.id}}
  </div>
  <div class="entity-col">
    {{$ctrl.entity.host}}
  </div> 
</div>

Petite

Thx, yar1. It works but I'd better prefer not to put such a hack to the code although it solves the IDE issue. – Paste

Agreed. Just a temp solution until they fix WebStorm to work well with Angular 1.5 components (and an easy one to remove once they do). – Petite

...and when using TypeScript with AngularJS, you can write the type hint between script tags <script>/** @var {ComponentClass} $ctrl */</script> to have full typed autocomplete within the IDE. <script> tags in templates are not executed by default. – Kirit

Or an alternative that doesn't seem to pollute the global namespace: <script> /** @type {OrderComponent} */ let $ctrl; </script> – Kirit

Answer 3

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 .

Madelle

Answer 4

Edit: Just realized this wasnt about removing the error/warning but leaving this answer anyway:

I removed the warning in Editor > Inpections > Unresolved Javascript variable for everything but javascript sources scope (which i have set up for my project). Its a bit of a "shotgun solution" but i can live without this check in html files...

Koel