模板：未解析的变量或类型$ctrl

Question

如何告诉 PhpStorm/WebStorm 模板中的$ctrl是已知的，并帮助它决定它所属的控制器（也许使用 jsdoc）？

我在Angular 1.5中以这种方式创建组件：

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

控制器没有帮助...

问题出现位置的HTML代码片段(< code>$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>

Answer 1

我找到了一个不错的解决办法。

条件

您必须至少使用ES2016。

如果你有这样一个组件:

export class MyComponent {

}

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

您可以简单地添加以下行：

module.$ctrl = MyComponent;

那么WebStorm就能够解析模板中的< code>$ctrl。不幸的是，智能感知/自动完成功能仍然不起作用。

Answer 2

您可以通过（错误地）使用 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>

Answer 3

不幸的是，Angular 1.5 组件尚未完全受支持，请按照 WEB-20339 进行更新