CODEWITHSUNDEEP
angularjsphpstormwebstormangularjs-components
Amio.io
Amio.io

Reputation: 21565

template: unresolved variable or type $ctrl

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>

Upvotes: 7

Views: 3919

Answers (4)

scipper
scipper

Reputation: 3153

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 .

Upvotes: 2

bWlrYWphdWhvbmVu
bWlrYWphdWhvbmVu

Reputation: 1774

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...

Upvotes: 0

yar1
yar1

Reputation: 1351

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>

Upvotes: 4

lena
lena

Reputation: 93728

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

Upvotes: 4

Related Questions