Объект $ routeParams становится пустым в Angular JS

Ниже приведен фрагмент кода, который я пытаюсь использовать. Я не получаю значения от $routeParams, даже кажется, что $routeProvider не вызывается. Я пытаюсь щелкнуть ссылку и получить значения из параметров URL-адреса и изменить заголовок страницы, когда я перехожу по разным ссылкам путем маршрутизации. Пожалуйста, оставьте свой отзыв, если я что-то упустил.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html ng-app='eventApp' ng-controller='eventController' xmlns="http://www.w3.org/1999/xhtml">
       <head>

          <title > {{title}}</title>
          <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
          <style>
             html, body, input, select, textarea
             {
             font-size: 1.05em !important;
             }
          </style>
          <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js">     </script>  
       </head>
       <body >
          <hr />
          Language: <a href="#/event/en" ng-class="{ 'bg-primary': language === 'en' }">en</a> | 
<a href="#/event/np" ng-class="{ 'bg-primary': language === 'np' }">np</a> | 
<a href="#/event/mt" ng-class="{ 'bg-primary': language === 'mt' }">mt</a>
          <hr />
       </body>
       <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
       <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js"></script>
       <script>
          var cfn = angular.module('eventApp',['ngRoute']);
            cfn.config(function ($routeProvider) {
                $routeProvider

           .when('/event/:language', {
               templateUrl: 'eventPage.html',
               controller: 'eventController'
           })

          });

            cfn.controller('eventController',['$scope','$routeParams', function($scope,$routeParams){
                console.log($routeParams.language);
                $scope.lang = $routeParams.language || 'en';
                if($scope.lang=='en'){
                    console.log($scope.lang);
                    $scope.title="np";
                }

                else if($scope.lang=='np'){
                    $scope.title="np";
                }

                else if($scope.lang=='mt'){
                    $scope.title="mt";
                }


          }]);


       </script>
    </html>

angularjs angular-ui-router ngroute
person azesh    schedule 18.02.2016    source источник
comment
Вам нужен ng-view для загрузки вашего eventPage.html.   -  person Andrew Mairose    schedule 18.02.2016
comment
@AndrewMairose это должен быть ответ. Также скрипты должны быть внутри тела, а не снаружи.   -  person JB Nizet    schedule 18.02.2016
comment
привет, я добавил ‹div ng-view›‹/div› внутри тела, но теперь он работает в бесконечном цикле, страница натыкается на цикл страницы просмотра. Пожалуйста, попробуйте запустить добавление файла ng-view.   -  person azesh    schedule 18.02.2016

Ответы (1)


arrow_upward
4
arrow_downward

Есть несколько вещей, которые вы делаете неправильно.

  1. Вам нужно добавить ng-view на свою страницу, чтобы он загрузил ваш eventPage.html.
  2. Вам нужно удалить ng-controller, поскольку вы предоставляете контроллеру ngRoute.
  3. Ваши теги <script> должны быть внутри тега <body>.
  4. Вместо того, чтобы устанавливать по умолчанию en в вашем контроллере, вы можете использовать метод .otherwise $routeProvider для перенаправления на /event/en всякий раз, когда язык не указан для маршрута.
  5. Вы не можете получить доступ к $scope вашего контроллера из-за пределов шаблона в вашем ng-view, поэтому ваши директивы ng-class в ваших тегах привязки не будут работать, потому что они не могут получить доступ к переменной language вашего контроллера $scope. Есть два способа исправить это. Вы можете либо переместить HTML-код выбора языка в свой шаблон eventPage.html, либо ввести $rootScope в свой контроллер и установить язык для этого объекта.

Ваш HTML должен выглядеть примерно так:

<div ng-app="eventApp">
  <hr />
  Language:
  <a href="#/event/en" ng-class="{'bg-primary': language === 'en'}">en</a> | 
  <a href="#/event/np" ng-class="{'bg-primary': language === 'np'}">np</a> | 
  <a href="#/event/mt" ng-class="{'bg-primary': language === 'mt'}">mt</a> 
  <hr />
  <div ng-view=""></div>
</div>

И ваш JavaScript должен выглядеть примерно так (очевидно, с вашим eventPage.html вместо строки, которую я использовал для шаблона):

var cfn = angular.module('eventApp', ['ngRoute']);

cfn.config(function($routeProvider) {
  $routeProvider.when('/event/:language', {
    template: '<h1>{{title}}</h1>',
    controller: 'eventController'
  }).otherwise({redirectTo: '/event/en'});
});

cfn.controller('eventController', ['$scope', '$routeParams','$rootScope',
  function($scope, $routeParams, $rootScope) {
    $scope.title = $routeParams.language;
    $rootScope.language = $routeParams.language;
  }
]);

Вот рабочая скрипта.

person Andrew Mairose    schedule 18.02.2016
comment
Спасибо, я ценю вашу помощь и рекомендации. - person azesh; 18.02.2016
comment
как только я поместил свою html-страницу в шаблон: 'eventPage.html', я не получаю отображаемую страницу, но на моей странице появляется строка 'eventPage.html'. Я также хочу загрузить другую страницу в шаблоне на основе значений $ routeParams. - person azesh; 19.02.2016
comment
Я мог загрузить html-страницу, мне не хватало templateUrl:'eventPage.html', но как я могу изменить свой шаблон на основе значения параметров? Любое предложение. - person azesh; 19.02.2016
comment
Вы можете получить доступ к переменным в объекте $scope в вашем шаблоне. Например, если в вашем контроллере есть $scope.title = $routeParams.language, вы можете получить доступ к $scope.title в HTML вашего шаблона с помощью {{title}}. - person Andrew Mairose; 19.02.2016
comment
Я хотел отобразить другую HTML-страницу в templateUrl на основе полученного значения $ routeParams. Возможно ли изменить templateUrl. - person azesh; 20.02.2016
comment
Я нашел решение, вместо того, чтобы проверять значение $ routeParams, я просто использовал другой URL-адрес маршрутизации, например when('/event/en .when(/event/np, и загрузил свой шаблон. - person azesh; 20.02.2016