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

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

Answer 2

使用ng-init =＆＃34; $ ctrl = $ ctrl＆＃34;

可以避免（误）大部分噪音

<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

我找到了一个不太糟糕的解决方法。

条件

您必须至少使用ES2016。

如果您有这样的组件：

export class MyComponent {

}

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

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

module.$ctrl = MyComponent;

然后，WebStorm能够解析模板中的$ctrl。遗憾的是，intellisense / autocomplete仍无效。

Answer 4

编辑：刚刚意识到这不是关于删除错误/警告但仍然留下这个答案：

我在编辑器＆gt;中删除了警告Inpections＆gt;除了javascript源范围（我已为我的项目设置）之外的所有内容的未解决的Javascript变量。它是一个＆＃34;霰弹枪解决方案＆＃34;但我可以在没有这个检查html文件的情况下生活...

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

4 个答案: