$routeParams object 在 Angular JS 中变空

Question

下面是我正在尝试的代码片段。我没有从 $routeParams 获取值，即使 $routeProvider 似乎没有被调用。当我通过路由导航到不同的 link 时，我试图单击 link 并从 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>

Answer 1

有几件事你做错了。

您需要在页面中添加 ng-view 才能加载您的 eventPage.html。
您需要删除 ng-controller，因为您为控制器提供 ngRoute。
您的 <script> 标签应该在 <body> 标签内。
您可以使用 $routeProvider 的 .otherwise 方法在未提供语言时重定向到 /event/en，而不是在您的控制器中将默认值设置为 en到路线。
您无法从 ng-view 中的模板外部访问控制器的 $scope，因此锚标记上的 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;
  }
]);

这是一个有效的 fiddle。

$routeParams object 在 Angular JS 中变空

$routeParams object getting empty in Angular JS

angularjs

angular-ui-router

ngroute