angularjs - 提供 ui-router 解析的资源，无需直接注入(inject) Controller

Question

我正在开发一个 Angular 1.5 应用程序，该应用程序大量使用 ui-router。

我们这样定义我们的状态:

$stateProvider
  .state('jobs', {
    url: '/jobs',
    template: '<ut-jobs></ut-jobs>',
});

请注意，此页面的模板是一个简单的 Angular 指令，而不是带有单独 Controller 的 template 字符串(或 templateUrl)。我们的指令的 Controller 是内联定义的，如下所示:

angular.directive('utJobs', () => {
  return {
    templateUrl: 'jobs.html',
    controllerAs: 'jobs',
    controller: [() => {
      console.log('jobs directive loaded!');
    }],
  }
});

这让我们可以保持事情的整洁，因为我们的指令的 Controller 接近指令的定义。

我们希望利用 ui-router 的 resolve 功能来帮助简化我们的资源获取。然而，由于我们的状态 Controller 没有保存在 $stateProvider.state 定义中，我一生都无法弄清楚如何访问 resolve 的结果(上面示例中的 job。)是否有某种 $resolve 服务可以注入(inject)到指令的 Controller 中以访问已解析的资源？我错过了一些明显的东西吗？还是 ui-router 不支持这个？

Answer 1

根据您的 UI-Router 版本，您有两个选项。

如果您使用的是 ui-router 1.0.0-beta 或更高版本

ui-router 1.0.0-beta 允许路由组件，因此您的解析将直接与指令的范围绑定(bind)映射。

$stateProvider
  .state('jobs', {
    url: '/jobs',
    resolve: {
      jobs: (JobsService) => JobsService.getAll()
    }
    component: 'ut-jobs'
});

然后将解析属性绑定(bind)到您的.directive:

angular.directive('utJobs', () => {
  return {
    templateUrl: 'jobs.html',
    scope: {
      jobs: '<'
    },
    controllerAs: 'jobs',
    controller: () => {
      // do what you will this.jobs
    },
  }
});

如果您没有使用 ui-router 1.0.0-beta

您必须在您的状态上创建一个 Controller ，并从您的解析中传递资源，然后将其传递到您的指令中。

$stateProvider
  .state('jobs', {
    url: '/jobs',,
    resolve: {
      jobs: (JobsService) => JobsService.getAll()
    },
    controller: function($scope, jobs) {
      $scope.jobs = jobs;
    },
    template: '<ut-jobs jobs="jobs"></ut-jobs>',
});

在这种情况下，$scope 上的 jobs 对象将传递给您的指令:

angular.directive('utJobs', () => {
  return {
    templateUrl: 'jobs.html',
    scope: {
      jobs: '<'
    },
    controllerAs: 'jobs',
    controller: [() => {
      // do what you will this.jobs
    }],
  }
});

笔记/阅读

• 根据您的应用程序的状态，我建议升级 UI-Router ( https://ui-router.github.io/blog/uirouter-1.0.0-beta.3/ ) 以允许组件路由。
• 我建议阅读 Angular 文档 ( https://docs.angularjs.org/guide/component ) 中有关组件与指令的内容。 Angular 1.5 公开了首选的 .component 语法。
• 托德·莫托 (Todd Motto) 在主观方面写下了精彩的文章 ( https://toddmotto.com/rewriting-angular-styleguide-angular-2 )。