提供ui路由器解析的资源，而无需直接注入控制器 [英] Provide ui-router resolved resources without injecting directly into controller

问题描述

我正在开发一个1.5版本的应用程序，该应用程序大量使用了ui-router.

I'm working on an angular 1.5 app that makes heavy use of ui-router.

我们这样定义状态:

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

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

Notice that the template for this page is a simple angular directive rather than a template string (or templateUrl) with a separate controller. Our directive's controllers are defined inline, like this:

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

这使我们保持整洁，因为指令的控制器与指令定义很接近.

This lets us keep things nice and tidy, since our directive's controllers are close to the directive definition.

我们想利用ui-router的resolve功能来帮助简化我们的资源获取.但是，由于我们的状态控制器没有保留在$stateProvider.state定义中，因此我一生都无法弄清楚如何访问resolve的结果(在上例中为job).我可以注入到指令的控制器中以访问已解析资源的$resolve服务?我缺少明显的东西吗?还是ui-router不支持此功能?

We would like to leverage ui-router's resolve feature to help simplify our resource fetching. However, since our state controllers aren't kept in $stateProvider.state definitions, I can't figure out for the life of me how to access the result of resolve (job in the above example.) Is there some kind of $resolve service that I could inject into the directive's controller to access the resolved resources? Am I missing something obvious? Or is ui-router not support this?

推荐答案

您有两种选择，具体取决于您的UI-Router版本.

You have two options depending on your version of UI-Router.

ui-router 1.0.0-beta允许使用路由组件，因此您的解析将直接与指令的作用域绑定进行映射.

ui-router 1.0.0-beta allows for routed components, so your resolves would map directly with your directive's scope binding.

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

然后将resolve属性绑定到您的.directive:

Then bind the resolve property to your .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

您将必须在您的状态上创建一个控制器，并从您的解决方案中传入资源，然后将其传递到您的指令中.

If you are not using ui-router 1.0.0-beta

You will have to create a controller on your state and pass in the resource from your resolve, and then pass that into your directive.

$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对象将传递给您的指令:

In this case, the jobs object on $scope is getting passed to your directive:

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文档中的组件vs指令( https://docs.angularjs.org/guide/component ). Angular 1.5公开了首选的.component语法.
• Todd Motto在主观方面做得很出色( https://toddmotto.com/rewriting-angular-styleguide-angular-2 ).

Notes/Reading

• Depending on the state of your app, I would recommend upgrading UI-Router (https://ui-router.github.io/blog/uirouter-1.0.0-beta.3/) to allow for component routing.
• I would recommend reading about components vs directives in the Angular docs (https://docs.angularjs.org/guide/component). Angular 1.5 exposed the .component syntax which is preferred.
• Todd Motto has done great writing on the subjective (https://toddmotto.com/rewriting-angular-styleguide-angular-2).

这篇关于提供ui路由器解析的资源，而无需直接注入控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！