Home > Article > Web Front-end > AngularJS jumps to page parameter passing method through routing module ui-sref instruction
Routing 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'); }])
Controllercontroller
<p style="margin-bottom: 7px;">'use strict'angular.module('app').controller('mainCtrl',['$scope',function($scope){<br/> $scope.list = [{<br/> id:'1', //将这个id写到页面上<br/> name:'销售',<br/> imgSrc:'image/company-3.png',<br/> companyName: '千度',<br/> city: '上海',<br/> industry: '互联网',<br/> time: '2016-06-01 11:05'<br/> },{<br/> id:'2',<br/> name:'WEB前端',<br/> imgSrc:'image/company-1.png',<br/> companyName: '慕课网',<br/> city: '北京',<br/> industry: '互联网',<br/> time: '2016-06-01 01:05'<br/> }];<br/>}]);<br/></p>
html template
<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>
Get route parameters:
Inject $state service, $state service There is a $state.params attribute. This $state.params attribute is a json object. The data contained in this json object is the parameters we passed in earlier.
'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 cross-page parameter passing method summary:
①Declare url in the route: '/url/:parameter';
②Get data through ui-sref= Mount the parameters behind the url using "url({id:item.id})";
③Inject the $state service into the controller and use the \$state.params attribute to obtain the passed parameters.
The above is the detailed content of AngularJS jumps to page parameter passing method through routing module ui-sref instruction. For more information, please follow other related articles on the PHP Chinese website!