Angularjs 角型脚本状态控制器

我正在尝试将控制器连接到一个状态（使用angular ui.router），但我不明白为什么用一种方式编写它，而不是用另一种方式

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

但这并不是（对于“匿名”控制器）：

请记住，我的控制器具有依赖性：

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');
  }
}

My 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>

}

---

问题是

控制器.newItem（）

调用。在工作示例中，它将正常工作，否则它不会向控制台显示任何内容。我还注意到，

项

数组（在控制器的构造函数中设置）总是会被填充的（无论采用何种方法），因此只需调用

控制器.newItem（）

，这将不起作用…

您应该将控制器作为字符串名传递：

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

如文档中所述。$stateProvider

控制器

：控制器

fn

，如果作为字符串传递，则应与新的相关作用域或注册控制器的名称关联。或者，可以在此处声明控制器

但是我们也可以只对构造函数（类名）进行路径选择

有。 我将控制器放置到命名空间中：

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');
  }
 }
}

检查

在这种情况下：

.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>

...
xxx
..

---

我们可以看到它正在工作

在这种情况下，我不想向模块注册控制器（我注册它只是为了让它工作）。这种状态是唯一的用法，所以我宁愿动态地指定它……我同时使用（typescript和UI路由器），并且会阻止您使用这种方法（您想要的方法）。试着用自然的方式去做。注册控制器，声明依赖项（

static$inject=[…]

），并让控制器过它的生活。通过它的字符串名（IoC）将它连接到state。通过这种方式，你可以独立于州进行测试……好吧，这已经足够好了，但我仍然不明白为什么会有差异，这就是为什么我发布了这个问题……我扩展了我的答案，并表明你的方法（我不会那样做）是有效的。我添加了指向working plunker的链接，并提供了更多详细信息。希望能对你有所帮助。。。祝TS和UI路由器好运；）谢谢，我只是在读文档，它清楚地说明了is应该如何工作（正如您所强调的）。。。

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');
  }
 }
}

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

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