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

IT技术 javascript angularjs
2021-02-02 09:47:31

我们的应用程序有 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 以动态提供模板?

6个回答

这个非常有用的功能现在从 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

@FlavorScape 我也有这个问题 - 解决方案是做类似 $routeProvider.when("/foo", { controller : "FooController", controllerAs : "foo", templateUrl: "foo.html" });
2021-03-22 09:47:31
基于参数的动态控制器怎么样?
2021-03-24 09:47:31
这现在在 1.2 中完全支持,它可能是最好的方法:docs.angularjs.org/api/ngRoute/provider/$routeProvider
2021-03-28 09:47:31
在这种情况下,您如何从模板访问控制器(由 $routeProvider 提供)?通常,如果控制器由 ng-controller="myController" 指令绑定,您可以将其引用为 myController 作为 myCtrl。在这种情况下如何定义 myCtrl?
2021-03-30 09:47:31
拜托,拜托(拜托!)告诉我这可能与controllers......有关?
2021-03-31 09:47:31

我找不到注入和使用该$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的指向一个部分 HTML 文件,ng-include然后使用$routeParams在您的控制器中设置 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>
前者不起作用的问题已记录在groups.google.com/forum/?fromgroups=#!topic/angular/qNi5lqm-Ps8 中由于注入目标config()只传递提供者,而不是实际的服务实例,例如$routePrams.
2021-03-16 09:47:31
你不能只使用template代替templateUrl吗?
2021-03-24 09:47:31
如果设置template为函数,则可以传入$routeParams该函数:$routeProvider.when('/:pNav/:sNav', { template: fn($routeParams) { return $routeParams.pNav + '/' + $routeParams.sNav + '.html' } });. 但是,您不能以这种方式动态定义控制器:(
2021-03-27 09:47:31
您实际上不必创建“一行 html 文件”——只需使用“模板:”键而不是“templateUrl”,并为其提供一个包含单行 html 的字符串;-)
2021-03-28 09:47:31
这实际上会起作用,但是为每个选定的模板应用一个控制器呢?使用这种方法将只剩下一个“主”控制器:“RouteController”
2021-04-08 09:47:31

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

请参阅示例。

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

希望这有帮助。

好吧,我想我明白了......

首先是一点背景知识:我需要它的原因是将 Angular 放在 Node Express 之上,并让 Jade 为我处理我的部分。

所以这是你必须做的事情......(喝啤酒,然后花 20 多个小时在上面!!!)......

设置module时,$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全局存储module的var,例如,routeProvider以便您的控制器可以访问它。

  • 然后你就可以使用routeProvider并创建一个新的路由(你不能“重置路由”/“重新Promise”;你必须创建一个新路由),我只是在最后添加了一个斜杠(/),以便它是语义作为第一。

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

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

  • 最后(仍在控制器中),用于$location.path()重定向到刚刚创建的路由。

如果您对如何将 Angular 应用程序贴在 Express 应用程序上感兴趣,您可以在这里 fork 我的 repo:https : //github.com/cScarlson/isomorph

如果您想使用 WebSockets 将 HTML 绑定到数据库,此方法还允许您保留 AngularJS 双向数据绑定:否则,如果没有此方法,您的 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;
...

我认为 $routeParams 在路由器内部不可见是 angularjs 的一个弱点。在实施过程中,一个微小的改进就会产生很大的不同。