Question

以下是我正在尝试的代码片段。我没有从$ 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>

Answer 1

有些事情你做错了。

您需要在页面中添加ng-view才能加载eventPage.html。
您需要删除ng-controller，因为您为控制器提供了ngRoute。
您的<script>标记应位于<body>标记内。
您可以使用en的{{1}}方法重定向到.otherwise，而不是在控制器中设置默认值$routeProvider。路由。
您无法从/event/en模板外部访问控制器的$scope，因此您的锚标记上的ng-view指令将无效，因为他们无法访问控制器的ng-class变量language。有两种方法可以解决这个问题。您可以将语言选择html移动到$scope模板中，也可以将eventPage.html注入控制器，并在该对象上设置语言。

您的HTML应如下所示：

$rootScope

你的JavaScript看起来应该是这样的（显然是你的<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>而不是我用于模板的字符串）：

eventPage.html

这是一个有效的fiddle。

$ routeParams对象在Angular JS中变空

1 个答案: