Question

我正在尝试从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始终为null。为什么？

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

Answer 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>

Answer 2

与AngularJS 1.3.0存在同样的问题，更新到1.3.13修复了它。

将$ routeParams注入控制器

2 个答案: