AngularJS - 如何在生成templateUrl时使用$ routeParams?

时间:2012-07-18 05:19:46

标签: javascript angularjs

我们的应用程序具有2级导航功能。我们希望使用AngularJS $routeProvider<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以动态提供模板?

8 个答案:

答案 0 :(得分:129)

这个非常有用的功能现在可从AngularJS 1.1.2版开始提供。它被认为是不稳定的,但我已经使用它(1.1.3)并且它工作正常。

基本上,您可以使用函数生成templateUrl字符串。该函数传递可用于构建的路由参数并返回templateUrl字符串。

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:'/'});
    }
);

非常感谢https://github.com/lrlopez提取请求。

https://github.com/angular/angular.js/pull/1524

答案 1 :(得分:84)

我找不到注入和使用$routeParams服务的方法(我认为这是一个更好的解决方案)我试过这个认为它可能有用:

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 s在控制器中设置网址像这样:

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>

答案 2 :(得分:18)

templateUrl可以用作返回生成的URL的函数。我们可以通过传递带有routeParams的参数来操纵url。

参见示例。

.when('/:screenName/list',{
    templateUrl: function(params){
         return params.screenName +'/listUI'
    }
})

希望得到这个帮助。

答案 3 :(得分:7)

好吧,以为我明白了......

小背景: 我需要这个的原因是将Angular放在Node Express之上,并让Jade处理我的部分内容。

所以这是什么必须做的... (喝啤酒,先花20多个小时!)......

设置模块时,请全局保存$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/');

});
...

这可能比需要的更多信息......

  • 基本上,您需要全局存储模块的$routeProvider var,例如routeProvider,以便控制器可以访问它。

  • 然后您可以使用routeProvider并创建一条新路线(您不能'重置路线'/'重新建立';您必须创建一个新路线),我只是添加了斜线( /)最后,它与第一个语义一样。

  • 然后(在您的控制器内),将templateUrl设置为您想要点击的视图。

  • 取出controller对象的.when()属性,以免获得无限请求循环。

  • 最后(仍然在Controller中),使用$location.path()重定向到刚刚创建的路由。

如果您对如何将Angular应用程序打到Express应用程序感兴趣,可以在此处分配我的仓库:https://github.com/cScarlson/isomorph

此方法还允许您保留AngularJS双向数据绑定,以防您想使用WebSockets将HTML绑定到数据库:否则,如果没有此方法,您的Angular数据绑定将只输出{{model.param}}

如果你此时克隆了这个,你需要在你的机器上运行mongoDB来运行它。

希望这可以解决这个问题!

科迪

不要喝你的洗澡水。

答案 4 :(得分:3)

我已经在我的角度叉中添加了对此的支持。它允许您指定

$routeProvider
    .when('/:some/:param/:filled/:url', {
          templateUrl:'/:some/:param/:filled/template.ng.html'
     });

https://github.com/jamie-pate/angular.js/commit/dc9be174af2f6e8d55b798209dfb9235f390b934

不确定这会被拾取,因为它有点对抗角度,但它对我很有用

答案 5 :(得分:3)

路由器: -

...
.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在路由器内部不可见是一个弱点。在实施过程中,一个微小的增强将使世界变得不同。

答案 6 :(得分:1)

//module dependent on ngRoute  
 var app=angular.module("myApp",['ngRoute']);
    //spa-Route Config file
    app.config(function($routeProvider,$locationProvider){
          $locationProvider.hashPrefix('');
          $routeProvider
            .when('/',{template:'HOME'})
            .when('/about/:paramOne/:paramTwo',{template:'ABOUT',controller:'aboutCtrl'})
            .otherwise({template:'Not Found'});
    }
   //aboutUs controller 
    app.controller('aboutCtrl',function($routeParams){
          $scope.paramOnePrint=$routeParams.paramOne;
          $scope.paramTwoPrint=$routeParams.paramTwo;
    });
index.html中的

<a ng-href="#/about/firstParam/secondParam">About</a>

firstParam和secondParam可以根据您的需要进行任何操作。

答案 7 :(得分:0)

我遇到了类似的问题并使用了$stateParams代替routeParam