如何使用當前網址參數的角度控制器

我在URL中的動態值PARAMS和我想要得到它，併爲onload 當控制器使用，但我不知道該如何處理$route.current.params如何使用當前網址參數的角度控制器

讓說我有這條線路提供

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

然後在我的控制器

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

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

});

如果用戶訪問foo/abcdefg假設應顯示AB在控制檯cdefg，但我得到錯誤。「不能讀取屬性‘’的未定義」 PARAMS

來源

2013-07-03 vzhen

你在做什麼$ routeParams.bar？ –

未定義，我認爲是因爲我在url欄中輸入url而沒有觸發角度。 – vzhen

如果我直接在視圖中使用'{{$ route.current.params.bar}}'，那麼它就可以工作。 – vzhen

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

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

});

來源

2013-07-03 14:03:50 JAYBEkster

+14

我得到undefined – vzhen

@vzhen檢查參數名稱，它應該完全匹配您在$中聲明的名稱$ routeProvider'。 – Destiner

例如：

在你app_route.js你必須URL模式鏈接到一個特定的控制器和用於顯示DATAS模板：

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

在你特定的控制器添加邏輯（由巴這裏選擇數據）：同樣使用$ 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

而在你template.html，佈局：

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

不要忘記添加你想要顯示DATAS您的索引頁面上NG-視圖，NG-應用= 「mapApp」在html標記中。

我希望這將有助於你^^

更多信息，請參見：http://docs.angularjs.org/tutorial/step_07

來源

2013-08-08 12:46:03

要訪問$ route.current.params你當然需要包括由包括加載ngRoute模塊附加角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>

可以訪問通過創建init（）函數或與routeChangeSuccess onLoad的調用的current.params。

請參閱下面的代碼和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>

來源

2014-09-09 21:01:27

如何使用當前網址參數的角度控制器

回答

相關問題