Làm thế nào để sử dụng params url hiện tại trong điều khiển góc

Question

Tôi có một params giá trị động trong url và tôi muốn để có được nó và sử dụng trong điều khiển khi onload Nhưng tôi không có ý tưởng làm thế nào để đối phó với $route.current.params

Hãy nói tôi có nhà cung cấp tuyến đường này

$routeProvider.when('foo/:bar', {templateUrl: 'template.html'}; 

Sau đó, trong điều khiển của tôi

app.controller('mapCtrl', function($scope, $route, $routeParams) { 

    var param = $route.current.params.bar; 
    console.log(param); 

}); 

Nếu người dùng truy cập foo/abcdefg giả sử sẽ hiển thị ab cdefg trong giao diện điều khiển nhưng tôi đã nhận lỗi. 'không thể đọc thuộc tính 'params' không xác định'

Answer 1

$routeProvider.when('foo/:bar', {templateUrl: 'template.html', controller: 'mapCtrl'}; 
app.controller('mapCtrl', function($scope, $route, $routeParams) { 

    var param = $routeParams.bar 
    console.log(param); 

}); 

Answer 2

Ví dụ:

Trong bạn app_route.js bạn phải liên kết mẫu url để một bộ điều khiển cụ thể và các mẫu để sử dụng cho dữ liệu ngay hiển thị:

angular.module('mapApp', []). 
    config(['$routeProvider', function($routeProvider){ 
       $routeProvider.when('/foo/:bar', {templateUrl: './view/partial/template.html', controller: mapCtrl}); 
       $routeProvider.otherwise({redirectTo: '/foo/01'}); 
      } 
      ]); 

Trong điều khiển cụ thể của bạn, bạn thêm logic (ở đây chọn dữ liệu bằng cách thanh): Cùng sử dụng với $ routeParams & $ route.current.params

function mapCtrl($scope, $routeParams, $http) { 
    $http.get('./data/myDatas.json').success(function(data){ 
             var arr = new Array(); 
             for(var i=0; i < data.length; i++){ 
              if(data[i].bar == $routeParams.bar){ 
               arr.push(data[i]);        } 
              } 
             $scope.items = arr; 
             }); 
} 
mapCtrl.$inject = ['$scope', '$routeParams', '$http']; //for minified bug issue 

Và trong template.html của bạn, cách bố trí:

<div ng-repeat="item in items"> 
    <h3>{{item.bar}}</h3> 
</div> 

Đừng quên thêm ng xem trên trang index của bạn, nơi bạn muốn dữ liệu ngay hiển thị, và ng-app = "mapApp" trong thẻ html.

Tôi hy vọng rằng sẽ giúp bạn ^^

để biết thêm thông tin, xem: http://docs.angularjs.org/tutorial/step_07

Answer 3

Để truy cập vào $ route.current.params bạn tất nhiên cần phải bao gồm các module ngRoute được nạp bằng cách bao gồm các thêm góc-route.js

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.0/angular.min.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.0/angular-route.js"></script> 

Bạn có thể truy cập vào current.params onload bằng cách tạo ra một hàm init() hoặc với routeChangeSuccess.

Xem mã bên dưới và ví dụ hoạt động trên jsfiddle.

<script type="text/javascript"> 

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

app.config(function ($routeProvider) { 
    $routeProvider 
    .when('/foo/:bar', { 
     controller: 'MainCtrl', 
     templateUrl: 'template.html' } 
); 
}); 

app.controller('MainCtrl', [ 
    '$rootScope', '$scope', '$route', '$routeParams', function($rootScope, $scope, $route, $routeParams){ 

    $scope.routeParams = {}; 
    $scope.routeParams.bar = $routeParams.bar; 

    var init = function() { 
     $scope.initCurrentParams = {}; 
     $scope.$route = $route; 
     $scope.initCurrentParams.bar = $scope.$route.current.params.bar; 
     console.log('from init', $scope.initCurrentParams.bar); 
    }; 
    init(); 

    $scope.$on('$routeChangeSuccess', function() { 

     $scope.routeChangeSuccessCurrentParams = {}; 
     $scope.$route = $route; 
     $scope.routeChangeSuccessCurrentParams.bar = $scope.$route.current.params.bar; 
     console.log('from routeChangeSuccess', $scope.routeChangeSuccessCurrentParams.bar); 
    }); 
}]); 

</script> 

<div ng-app="myApp" class="ng-scope"> 
    <script type="text/ng-template" id="template.html"> 
     $routeParams.bar: {{ routeParams.bar }} <br /> 
     initCurrentParams.bar: {{ initCurrentParams.bar }} <br /> 
     routeChangeSuccessCurrentParams.bar: {{ routeChangeSuccessCurrentParams.bar }} <br /> 
    </script> 

    <div class="ng-scope"> 
     <ul> 
      <li><a href="#/foo/1">bar 1</a></li> 
     </ul> 
     <ng-view></ng-view> 
    </div> 
    </div>