Question

我正在尝试将一个控制器附加到一个状态（使用angular ui.router），我不明白为什么写一个方法有效，而不是另一个。

工作示例（控制器针对模块注册）：

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

但这不是（带有'匿名'控制器）：

this.$stateProvider
  .state('items', {
    url: '/{cluster}/items',
    templateUrl: App.mapPath('Items/Items.html'),
    controller: ItemsController,
    controllerAs: '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.newItem()无效的问题......

Answer 1

您应该将控制器作为STRING名称传递：

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 ：控制器fn应与新关联的范围相关联，或者如果作为字符串传递，则与已注册控制器的名称相关联。可选地，可以在此声明ControllerAs。

但是我们也可以只修改构造函数（类名）。

有a working example。

我将控制器放入命名空间：

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

有了这个状态def：

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

此视图为Items / Items.html

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

我们可以看到它正在发挥作用。 Check it here

Angular TypeScript状态控制器

1 个答案:

有a working example。