1. 程式人生 > >AngularJS通過路由模組ui-sref指令跳轉頁面傳參方式

AngularJS通過路由模組ui-sref指令跳轉頁面傳參方式

路由router.js

'use strict';

angular.module('app').config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
  $stateProvider.state('main', {
    url: '/main',
    templateUrl: 'view/main.html',
    controller: 'mainCtrl'
  }).state('position', {
    url: '/position/:id'
, //這裡需要傳入一個id的引數放在url後面傳遞過去 templateUrl: 'view/position.html', controller: 'positionCtrl' }); $urlRouterProvider.otherwise('main'); }])

控制器controller

'use strict'

angular.module('app').controller('mainCtrl',['$scope',function($scope){
    $scope.list = [{
        id:'1'
, //將這個id寫到頁面上 name:'銷售', imgSrc:'image/company-3.png', companyName: '千度', city: '上海', industry: '網際網路', time: '2016-06-01 11:05' },{ id:'2', name:'WEB前端', imgSrc:'image/company-1.png', companyName: '慕課網'
, city: '北京', industry: '網際網路', time: '2016-06-01 01:05' }]; }]);

html模板

<ul class="bg-w position-list">//通過ui-sref="position({id:item.id})"的函式的方式將物件引數傳遞過去
    <li ui-sref="position({id:item.id})" class="item" ng-repeat="item in data">
        <img class="f-l logo" ng-src="{{item.imgSrc}}" alt="">
        <h3 class="title" ng-bind="item.name"></h3>
        <p class="text" ng-bind="item.companyName+'
                ['+item.city+']'+' '+item.industry"></p>
        <p class="text" ng-bind="item.time"></p>
    </li>
</ul>

獲取路由上引數:
注入$state服務,$state服務下有個$state.params屬性,這個$state.params屬性是個json物件,這個json物件所包含的資料就是我們前面傳入的引數。

'use strict';
angular.module('app').controller('positionCtrl',['$q','$http','$state','$scope',function ($q,$http,$state,$scope) {

              //獲取id的引數,並用$http請求對應的資料
              $http.get('/data/position?id='+$state.params.id).success(fn1).error(fn2);

}]);

AngularJS跨頁面傳參方式小結:
①在路由中宣告url: ‘/url/:引數’;
②獲取資料通過ui-sref=”url({id:item.id})”的方式將引數掛載到url後面;
③在控制器中注入$state服務,利用\$state.params屬性獲取傳過來的引數。

AngularJS傳參