gpt4 book ai didi

javascript - 从路由提供者访问 Controller 数据

转载 作者:行者123 更新时间:2023-11-30 16:32:16 24 4
gpt4 key购买 nike

我有一个带有路由器和一堆 Controller 的 Angular 应用程序,组织方式如下

articleApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/articles', {
templateUrl: 'templates/articles/index.html'
}).
when('/articles/:articleId', {
templateUrl: 'templates/articles/article.html'
}).
otherwise({
redirectTo: '/articles'
});
}]);

Controller 在模板中给出,例如,

<div ng-controller="ArticleCtrl">
<!-- [...] -->
</div>

现在,我想设置 <head>页面标题等数据,meta数据等取决于路线和页面内容。数据显然在 Controller 中,所以这就是我设置 <head> 的地方现在的数据。

不幸的是,这变得一团糟:这里一个 Controller ,那里一个 Controller ,也许在同一个 View 中处于事件状态,这个设置页面标题,那个设置页面标题......一个调试迷宫。

理想情况下,我只想在一个地方设置元数据,$routeProvider以上对我来说似乎很理想。不幸的是,我们无法访问那里 Controller 的数据。还是我们?

是否可以从 $routeProvider 访问 Controller 数据?

最佳答案

我认为您以错误的方式解决问题。如果在 Controller 范围内需要此数据,则应在 Controller 实例化之前解析。然后,您可以像注入(inject)任何组件一样将此数据注入(inject) Controller 。

具体参见 documentation对于 $routeProviderresolve 属性。

这是一个例子:

$routeProvider
.when('/phone/:phoneId', {
controller: 'PhoneDetailController',
templateUrl: 'phone.detail.html',
resolve: {
routeMetadata: function () {
return {
title: 'Phone product page',
keywords: ['phone', 'mobile', 'cellular']
}
}
}
});

在 Controller 中你只需要注入(inject)routeMetadata:

app.controller('PhoneDetailController', function (..., routeMetadata, ...) {
// ...
}

除了 resolve 属性(如果您需要从 api 获取数据时特别有用),您还可以使用一个技巧:在顶层定义数据路由定义:

$routeProvider
.when('/phone/:phoneId', {
controller: 'PhoneDetailController',
templateUrl: 'phone.detail.html',
routeMetadata: {
title: 'Phone product page',
keywords: ['phone', 'mobile', 'cellular']
}
});

然后可以在 $route.current 中访问此数据。虽然我写了这个,但我宁愿使用 resolve 属性。后者更像是一种解决方法,因为模块 ngRoutecustom 属性定义的属性之间的区别并不明显。

关于javascript - 从路由提供者访问 Controller 数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33157344/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com