将 $routeParams 注入控制器答案

【问题标题】：Injecting $routeParams into controller将 $routeParams 注入控制器
【发布时间】：2014-07-27 18:54:18
【问题描述】：

我正在尝试从 url 中提取一些数据以传递给控制器以在控制器中使用。我一直在尝试通过 Angular Routing 来实现。

<!DOCTYPE html>

<html ng-app>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Edit</title>
    <script src="~/Scripts/angular.min.js"></script>
</head>
<body>
    <div ng-controller="SearchController" >

        <input type="text" ng-model="SearchText" />

    </div>
    <script type="text/javascript">

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

        app.config(function ($locationProvider, $routeProvider) {
            $locationProvider.html5Mode(true);
            $routeProvider
                .when('/angularroute/edit/:sometext', {
                    controller: 'SearchController'
                });

        });

        app.controller("SearchController", ['$scope', '$routeParams', SearchController]);

        function SearchController($scope, $routeParams) {

            $scope.SearchText = $routeParams.sometext;

        }

        SearchController.$inject = ['$scope'];
    </script>
</body>
</html>
    <html ng-app>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Edit</title>
        <script src="~/Scripts/angular.min.js"></script>    
    </head>
<body>
    <div ng-controller="SearchController" >

        <input type="text" ng-model="SearchText" />

    </div>
    <script type="text/javascript">

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

    app.config(function ($locationProvider, $routeProvider) {
        $locationProvider.html5Mode(true);
        $routeProvider
            .when('/angularroute/edit/:sometext', {
                controller: 'SearchController'
            });

    });

    app.controller("SearchController", ['$scope', '$routeParams', SearchController]);

    function SearchController($scope, $routeParams) {

        $scope.SearchText = $routeParams.sometext;

    }

    SearchController.$inject = ['$scope'];
</script>
</body>
</html>

$routeParams 在控制器中始终为空。为什么？

其次，使用它的页面的 url 将是这样的：http://www.blah.com/angularroute/edit/32432 这是对 Angular 路由的适当使用吗？

【问题讨论】：

尝试删除SearchController.$inject = ['$scope'];
@PSL 这不是我在 app.config 部分所做的吗？
@HarishR 是的，这似乎模棱两可，我没有向下滚动..
删除该行会导致：docs.angularjs.org/error/$injector/…

标签： angularjs

【解决方案1】：

您好，您似乎错过了对 angular-route.js 脚本的引用，请在此处查看示例：http://plnkr.co/edit/RZxt3t9dNQxbyW94V9jQ?p=preview

JS：

var app = angular.module('app', ['ngRoute']);
app.config(function($locationProvider, $routeProvider) {

  $routeProvider
    .when('/angularroute/edit/:sometext', {
      controller: 'SearchController',
      templateUrl: 'http://run.plnkr.co/d8ZBAv3VEkfIJI4h/search.html'
    });

  $locationProvider.html5Mode(true);

});
app.controller('firstCtrl', function($scope) {

});
app.controller("SearchController", ['$scope', '$routeParams', SearchController]);

function SearchController($scope, $routeParams) {

  console.log($routeParams);

  $scope.SearchText = $routeParams.sometext;

}

html:

<!DOCTYPE html>
<html>

  <head>
       <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.js"></script>

    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>


<body ng-app="app">
  <div ng-controller="firstCtrl">
    <a href="/angularroute/edit/elephant">Search for elephant</a><br/>
     <a href="/angularroute/edit/horse">Search for horse</a><br/>
      <a href="/angularroute/edit/tigger">Search for tigger</a><br/>
      </div>
  <div ng-view="">

  </div>
  </body>

</html>

【讨论】：

【解决方案2】：

AngularJS 1.3.0 也有同样的问题，更新到 1.3.13 修复了它。

【讨论】：