模板：未解析的变量或键入 $ctrl

Question

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

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

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

ControllerAs 没有帮助...

HTML 出现问题的片段 ($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

很遗憾Angular1.5组件还没有完全支持，请关注WEB-20339更新

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

编辑：刚刚意识到这不是要删除 error/warning 但无论如何都要留下这个答案：

我删除了编辑器 > 检查 > 未解决 Javascript 变量中的警告，除了 javascript 源范围（我已经为我的项目设置）。它有点 "shotgun solution" 但我可以在没有此检查的情况下生活 html 文件...

Answer 4

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

条件

你必须至少使用 ES2016。

如果您有这样的组件：

export class MyComponent {

}

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

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

module.$ctrl = MyComponent;

然后 WebStorm 能够解析模板中的 $ctrl。不幸的是，intellisense/autocomplete 仍然无法正常工作。

模板：未解析的变量或键入 $ctrl

template: unresolved variable or type $ctrl

phpstorm

webstorm

angularjs

angularjs-components