AngularJS – 如何使用$ routeParams生成templateUrl？
我们的应用程序有2级导航。 我们希望使用AngularJS $routeProviderdynamic地为<ng-view />提供模板。 我正在考虑按照这样的方式做一些事情：
angular.module('myApp', []). config(['$routeProvider', function($routeProvider) { $routeProvider.when('/:primaryNav/:secondaryNav', { templateUrl: 'resources/angular/templates/nav/'+<<primaryNavHere>>+'/'+<<secondaryNavHere>>+'.html' }); }]);
我只是不知道如何填充<<>>的部分。 我知道primaryNav和secondaryNav被绑定到$ routeParams，但是如何在这里访问$ routeParams来dynamic地提供模板呢？
我找不到一种方法来注入和使用$routeParams服务（我认为这将是一个更好的解决scheme）我试过这个想法可能工作：
angular.module('myApp', []). config(function ($routeProvider, $routeParams) { $routeProvider.when('/:primaryNav/:secondaryNav', { templateUrl: 'resources/angular/templates/nav/'+$routeParams.primaryNav+'/'+$routeParams.secondaryNav+'.html' }); });
哪个产生了这个错误：
未知提供者：myApp的$ routeParams
如果类似的东西是不可能的，你可以改变你的templateUrl指向一个只包含ng-include HTML文件，然后在你的控制器中使用$routeParam来设置URL，如下所示：
angular.module('myApp', []). config(function ($routeProvider) { $routeProvider.when('/:primaryNav/:secondaryNav', { templateUrl: 'resources/angular/templates/nav/urlRouter.html', controller: 'RouteController' }); }); function RouteController($scope, $routeParams) { $scope.templateUrl = 'resources/angular/templates/nav/'+$routeParams.primaryNav+'/'+$routeParams.secondaryNav+'.html'; }
用这个作为你的urlRouter.html
<div ng-include src="templateUrl"></div>
这个非常有用的function现在可以从AngularJS的1.1.2版本开始。 这被认为是不稳定的，但我已经使用它（1.1.3），它工作正常。
基本上你可以使用一个函数来生成一个templateUrlstring。 该函数传递可用于构build并返回templateUrlstring的路由参数。
var app = angular.module('app',[]); app.config( function($routeProvider) { $routeProvider. when('/', {templateUrl:'/home'}). when('/users/:user_id', { controller:UserView, templateUrl: function(params){ return '/users/view/' + params.user_id; } } ). otherwise({redirectTo:'/'}); } );
templateUrl可以用作返回生成的URL的函数。 我们可以通过传递带有routeParams的参数来操纵url。
看例子。
.when('/:screenName/list',{ templateUrl: function(params){ return params.screenName +'/listUI' } })
希望这个帮助。
好吧，我想我知道了
第一个小背景：我需要这个的原因是在Node Express上贴上Angular，让Jade为我处理我的偏见。
所以，这就是whatchya必须做的…（喝啤酒，先花20+小时!!!）…
设置模块时， $routeProvider全局保存$routeProvider ：
// app.js: var routeProvider , app = angular.module('Isomorph', ['ngResource']).config(function($routeProvider){ routeProvider = $routeProvider; $routeProvider .when('/', {templateUrl: '/login', controller: 'AppCtrl'}) .when('/home', {templateUrl: '/', controller: 'AppCtrl'}) .when('/login', {templateUrl: '/login', controller: 'AppCtrl'}) .when('/SAMPLE', {templateUrl: '/SAMPLE', controller: 'SAMPLECtrl'}) .when('/map', {templateUrl: '/map', controller: 'MapCtrl'}) .when('/chat', {templateUrl: '/chat', controller: 'ChatCtrl'}) .when('/blog', {templateUrl: '/blog', controller: 'BlogCtrl'}) .when('/files', {templateUrl: '/files', controller: 'FilesCtrl'}) .when('/tasks', {templateUrl: '/tasks', controller: 'TasksCtrl'}) .when('/tasks/new', {templateUrl: '/tasks/new', controller: 'NewTaskCtrl'}) .when('/tasks/:id', {templateUrl: '/tasks', controller: 'ViewTaskCtrl'}) .when('/tasks/:id/edit', {templateUrl: '/tasks', controller: 'EditTaskCtrl'}) .when('/tasks/:id/delete', {templateUrl: '/tasks', controller: 'DeleteTaskCtrl'}) .otherwise({redirectTo: '/login'}); }); // ctrls.js ... app.controller('EditTaskCtrl', function($scope, $routeParams, $location, $http){ var idParam = $routeParams.id; routeProvider.when('/tasks/:id/edit/', {templateUrl: '/tasks/' + idParam + '/edit'}); $location.path('/tasks/' + idParam + '/edit/'); }); ...
这可能比需要更多的信息...
-
基本上，你会想要全局地存储你的模块的
$routeProvidervar，例如作为routeProvider以便它可以被你的控制器访问。 -
然后你可以使用
routeProvider创build一个NEW路由（你不能'重置路由'/'REpromise';你必须创build一个新的路由），我只是在最后加了一个斜杠（/），语义为第一。 -
然后（在您的控制器内），将
templateUrl设置为您要打的视图。 -
取出
.when()对象的controller属性，以免得到无限的请求循环。 -
最后（仍然在Controller中），使用
$location.path()redirect到刚创build的路由。
如果您对如何将一个Angular应用打到Express应用程序感兴趣，可以在这里将我的repo分叉： https ： //github.com/cScarlson/isomorph 。
而且，这种方法还允许您保留AngularJS双向数据绑定，以防您想使用WebSockets将您的HTML绑定到数据库：否则，如果没有此方法，您的Angular数据绑定将仅输出{{model.param}} 。
如果你现在克隆这个，你需要在你的机器上运行mongoDB。
希望这能解决这个问题！
科迪
不要喝你的洗澡水。
路由器：-
... .when('/enquiry/:page', { template: '<div ng-include src="templateUrl" onload="onLoad()"></div>', controller: 'enquiryCtrl' }) ...
控制器： –
... // template onload event $scope.onLoad = function() { console.log('onLoad()'); f_tcalInit(); // or other onload stuff } // initialize $scope.templateUrl = 'ci_index.php/adminctrl/enquiry/'+$routeParams.page; ...
我相信这是一个在angularjs弱点$ routeParams是不可见的内部路由器。 一个微小的增强会在实现过程中造成一个不同的世界。
我已经在angular叉中增加了对此的支持。 它允许你指定
$routeProvider .when('/:some/:param/:filled/:url', { templateUrl:'/:some/:param/:filled/template.ng.html' });
https://github.com/jamie-pate/angular.js/commit/dc9be174af2f6e8d55b798209dfb9235f390b934
不知道这将被拿起来，因为它是有棱angular的反对粮食，但它对我有用
我有一个类似的问题，并使用$stateParams而不是routeParam
