AngularJS - Как использовать $routeParams при генерации templateUrl?

Наше приложение имеет двухуровневую навигацию. Мы хотим использовать AngularJS $routeProvider динамически предоставлять шаблоны для <ng-view />, Я думал сделать что-то вроде этого:

angular.module('myApp', []).
config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/:primaryNav/:secondaryNav', {
        templateUrl: 'resources/angular/templates/nav/'+<<primaryNavHere>>+'/'+<<secondaryNavHere>>+'.html'
    });
}]);

Я просто не знаю, как заполнить части внутри <<>>, Я знаю, что primaryNav и secondNav связаны с $routeParams, но как мне получить доступ к $routeParams здесь, чтобы динамически обслуживать шаблон?

Источник

8 ответов

Решение

Я не мог найти способ ввести и использовать $routeParams сервис (который я бы предположил, будет лучшим решением), я попробовал это, думая, что это может работать:

angular.module('myApp', []).
    config(function ($routeProvider, $routeParams) {
        $routeProvider.when('/:primaryNav/:secondaryNav', {
            templateUrl: 'resources/angular/templates/nav/'+$routeParams.primaryNav+'/'+$routeParams.secondaryNav+'.html'
        });
    });

Который дал эту ошибку:

Неизвестный поставщик: $routeParams из myApp

Если что-то подобное невозможно, вы можете изменить templateUrl указать на частичный файл HTML, который просто имеет ng-include а затем установите URL в вашем контроллере, используя $routeParamвот так:

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>
Источник

Эта очень полезная функция теперь доступна начиная с версии 1.1.2 AngularJS. Он считается нестабильным, но я использовал его (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

Источник

templateUrl можно использовать как функцию с возвращением сгенерированного URL. Мы можем манипулировать URL с помощью передаваемого аргумента, который принимает routeParams.

Смотрите пример.

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

Надеюсь, это поможет.

Источник

Хорошо, думаю, я понял...

Сначала немного предыстории: причина, по которой я нуждался в этом, заключалась в том, чтобы прикрепить 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 и создать НОВЫЙ маршрут (вы не можете "СБРОСИТЬ маршрут" / "REpromise"; вы должны создать новый), я просто добавил косую черту (/) в конце, чтобы он был таким же семантическим, как и первый.

  • Затем (внутри вашего контроллера) установите templateUrl на вид, который вы хотите поразить.

  • Вынуть controller собственность .when() объект, чтобы вы не получили бесконечный цикл запроса.

  • И наконец (все еще внутри контроллера), используйте $location.path() перенаправить на маршрут, который был только что создан.

Если вам интересно, как прикрепить приложение Angular к приложению Express, вы можете раскошелиться на мой репозиторий здесь: https://github.com/cScarlson/isomorph.

И этот метод также позволяет вам сохранять двунаправленные привязки данных AngularJS на случай, если вы захотите связать свой HTML с вашей базой данных с помощью WebSockets: в противном случае без этого метода ваши привязки данных Angular будут просто выводить {{model.param}},

Если вы клонируете это в данный момент, вам понадобится mongoDB на вашем компьютере, чтобы запустить его.

Надеюсь, что это решит эту проблему!

Cody

Не пей свою ванну.

Источник

Я добавил поддержку для этого в своем форке Angular. Это позволяет вам указать

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

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

не уверен, что это будет подхвачено, поскольку это как бы против зерна для угловых, но это полезно для меня

Источник

Маршрутизатор:-

...
.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 НЕ виден внутри маршрутизатора. Крошечное улучшение внесло бы большой вклад во время реализации.

Источник 
//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 могут быть чем угодно в соответствии с вашими потребностями.

Источник

У меня была похожая проблема, и я использовал $stateParams вместо routeParam

Источник
Другие вопросы по тегам