angularjs - Angular TypeScript 状态 Controller

Question

我正在尝试将 Controller 附加到状态(使用 angular ui.router)，但我不明白为什么以一种方式编写它有效，而另一种方式无效。

工作示例( Controller 已针对模块注册):

this.$stateProvider
  .state('items', {
    url: '/{cluster}/items',
    templateUrl: App.mapPath('Items/Items.html'),
    controller: 'ItemsController as controller'
   });

但这不是(使用“匿名” Controller ):

this.$stateProvider
  .state('items', {
    url: '/{cluster}/items',
    templateUrl: App.mapPath('Items/Items.html'),
    controller: ItemsController,
    controllerAs: 'controller'
  });

请记住，我的 Controller 具有依赖性:

export class ItemsController {
  static $inject = ['$scope', 'itemsResource', '$stateParams'];
  constructor(
    scope: IItemsScope,
    itemsFactory: IItemsResource,
    stateParams: IClustersStateParams) {
     scope.items = itemsFactory.query({ cluster: stateParams.cluster });
   }

  public newItem(): void {
    console.log('test');
  }
}

我的 Items.html 模板是:

<div class="items">
  <ul class="add">
    <li>
      <action icon-style="glyphicon-plus" text="Add new item" activated="controller.newItem()"></action>
    </li>
  </ul>
  <ul>
    <li ng-repeat="item in items">
      <item item="item"></item>
    </li>
  </ul>
  </div>

还有 action指令:

export class ActionDirective implements ng.IDirective {
  restrict = 'E';
  replace = true;
  template = '<a class="action"><span class="glyphicon {{iconStyle}}" aria-hidden="true"></span><span>{{text}}</span></a>';
  scope = {
    iconStyle: '@iconStyle',
    text: '@text',
    activated: '&'
  };

  public link(scope: IActionDirectiveScope, instanceElement: ng.IAugmentedJQuery, instanceAttributes: ng.IAttributes, controller: any): void
  {
    instanceElement.on('click', (): void => {
    scope.activated();
    });
  }

public static factory(): ng.IDirectiveFactory {
  const directive = () => new ActionDirective();

  return directive;
}

问题是 controller.newItem()称呼。在工作示例中，它将正常工作，否则它不会向控制台显示任何内容。我还注意到 items数组(在 Controller 的构造函数中设置)将始终被填充(无论方法如何)，所以这只是调用 controller.newItem() 的问题。那行不通...

Answer 1

您应该将 Controller 作为字符串名称传递:

this.$stateProvider
  .state('items', {
    url: '/{cluster}/items',
    templateUrl: App.mapPath('Items/Items.html'),
    //controller: ItemsController,
    controller: "ItemsController",
    controllerAs: 'controller'
  })

如文档中所述 http://angular-ui.github.io/ui-router/site/#/api/ui.router.state .$stateProvider

controller: Controller fn that should be associated with newly related scope or the name of a registered controller if passed as a string. Optionally, the ControllerAs may be declared here.

但我们也可以只为构造函数(类名)指定路径。

有a working example .

我将 Controller 放入命名空间:

namespace MyModule{
 export class ItemsController {
  static $inject = ['$scope', 'itemsResource', '$stateParams'];
  constructor(
    scope: IItemsScope,
    itemsFactory: IItemsResource,
    stateParams: IClustersStateParams) {
     scope.items = itemsFactory.query({ cluster: stateParams.cluster });
   }

  public newItem(): void {
    console.log('test');
  }
 }
}

检查 it here

有了这个状态定义:

.state('items', {
    url: '/{cluster}/items',
    //templateUrl: App.mapPath('Items/Items.html'),
    templateUrl: 'Items/Items.html',
    controller: MyModule.ItemsController, 
    controllerAs: 'controller'
})

和这个 View Items/Items.html

<div class="items">
 ...
      <button icon-style="glyphicon-plus" text="Add new item" >xxx
 ..
</div>

我们可以看到它正在运行。 Check it here