Question

我有这段代码：

   var home = {
        name: 'home',
        template: '<div data-ui-view></div>',
        url: '/',
        templateUrl: 'app/access/partials/home.html',
        controller: ['accessService', function (accessService: IAccessService) {
                this.ac = accessService;
            }],
        controllerAs: 'home'
    };

    var homeAccess = {
        name: 'home.access',
        url: 'Access',
        templateUrl: 'app/access/partials/webapi.html',
        controller: ['accessService', function (accessService: IAccessService) {
                this.ac = accessService;
            }],
        controllerAs: 'homeAccess',
        resolve: {
            abc: ['accessService', function (accessService) {
                return accessService.getAbc();
            }],
            def: ['accessService', function (accessService) {
                return accessService.getDef();
            }]
        }
    };

现在我正在使用控制器是否有一种方法可以简化此代码，以便消除将accessService添加到两个控制器和解决方案的两个部分？此外，如果我这样做，那么我怎样才能进入home.html内的访问服务以及webapi.html？

Answer 1

可能有几种不同的方式，只是在这里大声思考。

您的home州是home.access的父级，并使用ui-view来显示子级状态。因此，子状态的模板可以引用父状态的控制器。这只是Angular视图中$ scope的常规继承，尽管使用controllerAs语法时b / c更清晰。

例如，您的观看次数最终可能如下所示：

<home-template>
  <p>{{home.someValue}}</p>

  <!-- included by the ui-view -->
  <home-access-template>
    <p>{{homeAccess.anotherValue}}
    <!-- this works b/c home is on the parent scope -->
    <p>{{home.someOtherValue}}</p>
  </home-access-template>

<home-template>

所以如果在你的场景中有意义，你只需要将你的accessService注入父控制器。子视图将通过父控制器的方法使用服务。

也可以通过结算来完成类似的事情：通过在父状态上声明它们，它们可供子状态使用。 当给定父级有很多子状态时，这会更有用。

使用ui-router和controllerAs可以简化服务的添加吗？

1 个答案: