Angularjs路由参数不起作用答案

【问题标题】：Angularjs Routing parameters not workingAngularjs路由参数不起作用
【发布时间】：2015-03-27 16:04:34
【问题描述】：

我正在我的 Apache 服务器中尝试以下代码，但它不起作用（单击链接时，没有任何反应）。它应该显示每个链接的标题/内容。

index.html

<!doctype html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.js"></script>
        <script src="app.js"></script>
        <script src="post.js"></script>
    </head>
    <body ng-app="blogApp">
        <nav>
            <a href="#/post/1">Blog post</a>
            <a href="#/post/2">Other post</a>
            <a href="#/post/3">Last post</a>
        </nav>
        <!-- Place where our user will be displayed -->
        <div ng-view>
        </div>
    </body>
</html>

app.js

angular.module('blogApp', ['ngRoute'])
    // Setting configuration for application
    .config(function ($routeProvider) {
        $routeProvider.when('/post/:postId', {
            controller: postCtrl,
            templateUrl: 'post.html'
        })

    })
    // Ignore code below. This is usually in seperate html files
    .run(function ($templateCache){
        $templateCache.put('post.html', '<p>Post number: {{postId}}</p><h1>{{title}}!</h1><p>{{content}}</p>');
    });

post.js

function postCtrl ($scope, $routeParams) {
    $scope.title = "Error";
    $scope.content = "No post with that number";

    $scope.postId = $routeParams.postId;
    switch ($routeParams.postId) {
        case '1':
            $scope.title = "Hello world";
            $scope.content = "This is my first post";
            break;
        case '2':
            $scope.title = "Post no 2";
            $scope.content = "This is my first post";
            break;
        case '3':
            $scope.title = "Last post";
            $scope.content = "Bye";
            break;
    }
}

感谢任何帮助。

【问题讨论】：

标签： angularjs parameter-passing ngroute ng-view angularjs-ng-route

【解决方案1】：

您的代码似乎很好，只是您错过了一个重要的部分

 app.controller('postCtrl', postCtrl);

请看下面的演示

var app = angular.module('blogApp', ['ngRoute']);

// Setting configuration for application
app.config(function($routeProvider) {
    $routeProvider.when('/post/:postId', {
      controller: postCtrl,
      templateUrl: 'post.html'
    })

  })
  // Ignore code below. This is usually in seperate html files
  .run(function($templateCache) {
    $templateCache.put('post.html', '<p>Post number: {{postId}}</p><h1>{{title}}!</h1><p>{{content}}</p>');
  });


app.controller('postCtrl', postCtrl);

function postCtrl($scope, $routeParams) {
  $scope.title = "Error";
  $scope.content = "No post with that number";

  $scope.postId = $routeParams.postId;
  switch ($routeParams.postId) {
    case '1':
      $scope.title = "Hello world";
      $scope.content = "This is my first post";
      break;
    case '2':
      $scope.title = "Post no 2";
      $scope.content = "This is my first post";
      break;
    case '3':
      $scope.title = "Last post";
      $scope.content = "Bye";
      break;
  }
}

<script src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
<script src="https://code.angularjs.org/1.4.0-beta.6/angular-route.js"></script>
<body ng-app="blogApp">
  <nav>
    <a href="#/post/1">Blog post</a>
    <a href="#/post/2">Other post</a>
    <a href="#/post/3">Last post</a>
  </nav>
  <!-- Place where our user will be displayed -->
  <div ng-view>
  </div>
</body>

【讨论】：