提供ui-router解析的资源，而无需直接注入控制器

Question

我正在开发一款大量使用ui-router的1.5角应用程序。

我们定义这样的状态：

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

请注意，此页面的模板是一个简单的角度指令，而不是带有单独控制器的template字符串（或templateUrl）。我们的指令控制器是内联定义的，如下所示：

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

这让我们保持整洁，因为我们的指令控制器接近指令定义。

我们希望利用ui-router的resolve功能来帮助简化我们的资源获取。但是，由于我们的状态控制器没有保留在$stateProvider.state定义中，因此我无法弄清楚如何访问上面示例中resolve（job的结果。）是否有某种$resolve服务可以注入指令的控制器以访问已解析的资源？我错过了一些明显的东西吗或者ui-router不支持这个？

Answer 1

根据您的UI-Router版本，您有两种选择。

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

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

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

然后将resolve属性绑定到.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

您必须在您的州创建一个控制器并从您的解析中传入资源，然后将其传递给您的指令。

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

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

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）。