2016-04-01 6 views
1

У меня есть куча моделей JSON в моем проекте, и мне нужно показать разные модели, зависит от действий пользователя.Динамически меняющиеся маршруты с использованием AngularJS

Вот Угловой код маршрутизатора:

app.config(['$routeProvider', 
    function($routeProvider) { 
    $routeProvider 
     .when('/', { 
     templateUrl: 'views/home.html', 
     controller: 'HomeCtrl' 
     }).when('/doc/:section, { 
     templateUrl: 'views/doc.html', 
     controller: 'DocCtrl' 
     }) 
     .otherwise({ 
     redirectTo: '/' 
     }); 
    }]); 

А вот DocCtrl.js файл:

app.controller('DocCtrl', ['$scope', '$http', 'JSONModelsService', 
    function ($scope, $http, JSONModelsService) { 

     var formData = {}; 

     $scope.group = {}; 
     $scope.sections = []; 

     JSONModelsService.get([section]) 
      .then(function (response) { 
       console.log(response); 
       $scope.group = response.data.groups[0]; 

       $scope.sections = $scope.group.sections; 
      }); 

    }]); 

мне в принципе нужно сделать section динамические, так что я могу показать различные модели в моих взглядах. Однако я смущен, как я могу это сделать. У меня просто есть папка с именем JSONModels с несколькими json-файлами.

ответ

1

Если я правильно понял ваш вопрос, вы намерены заменить часть кода [section] на фактический идентификатор раздела?

Когда пользователь посещает ваш маршрут /doc/:section, например. /doc/my-doc вы можете получить доступ к разделу :section, введя в ваш контроллер службу $routeParams.

app.controller('DocCtrl', ['$scope', '$http', '$routeParams', 'JSONModelsService', 
    function ($scope, $http, $routeParams, JSONModelsService) { 
    ... 

Используя услугу $routeParams, у вас есть доступ к параметрам вашего маршрута. Таким образом, вы можете легко получить доступ к параметру :section, прочитав его $routeParams.section.

Полный пример (из того, что я думаю, что вы пытаетесь достичь):

app.controller('DocCtrl', ['$scope', '$http', '$routeParams', 'JSONModelsService', 
function ($scope, $http, $routeParams, JSONModelsService) { 

    var formData = {}; 

    $scope.group = {}; 
    $scope.sections = []; 

    JSONModelsService.get([$routeParams.section]) 
     .then(function (response) { 
      console.log(response); 
      $scope.group = response.data.groups[0]; 

      $scope.sections = $scope.group.sections; 
     }); 

}]); 

Если вы хотели бы узнать больше, посмотрите на шаге 7 углового урока: https://docs.angularjs.org/tutorial/step_07

Смежные вопросы