提供 ui-router 解析的资源,无需直接注入控制器 [英] Provide ui-router resolved resources without injecting directly into controller
问题描述
我正在开发一个大量使用 ui-router 的 angular 1.5 应用.
I'm working on an angular 1.5 app that makes heavy use of ui-router.
我们这样定义我们的状态:
We define our states like this:
$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'
});
然后将解析属性绑定到您的 .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 文档中的组件与指令(https://docs.angularjs.org/指南/组件).Angular 1.5 公开了首选的
.component
语法. - 托德·莫托 (Todd Motto) 在主观方面写得很出色 (https://toddmotto.com/rewriting-angular-styleguide-angular-2).
- 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).
Notes/Reading
这篇关于提供 ui-router 解析的资源,无需直接注入控制器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!