在這里分享我做的一個使用ui-router 傳參的小demo
1.首先第一步設置入口文件index.html，注意加載的順序，先加載包，再加載自己寫的控制器。
<!doctype html> <html lang="en" ng-app="routerApp"> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title>測試</title> <!--lib是angular包的文件夾--> <script src="lib/jquery/jquery-1.11.3.min.js"></script> <script src="lib/angular/angular.js"></script> <script src="lib/angular-ui/angular-ui-router.js"></script> <!--js控制器的文件夾--> <script src="js/app.js"></script> <script src="js/indexCtrl.js"></script> <script src="js/resultCtrl.js"></script> </head> <body> <div ui-view> </div> </body> </html>
2.app.js文件，依賴注入，設置路由，此處的路由是使用ui-router路由，這里簡單的演示了兩個模板之間的傳參，傳遞參數的模板test.html和接收參數的模板result.html
var routerApp = angular.module('routerApp', ['ui.router']);
routerApp.run(function($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
});
routerApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/index');
$stateProvider
.state('index', {//模板的參數
url: '/index',//url的參數
templateUrl: 'templates/test.html',//模板的位置
controller: 'MyController'
})
.state('result', {
url: '/result/:id/:number',//需要傳的參數的鍵名
templateUrl: 'templates/result.html',
controller: 'resultCtrl'
});
});
3.第一個主頁面的模板test.html,并且設置點擊事件toResult()
<meta charset="UTF-8"> <div>hello world</div> <input type="button" ng-click="toResult()" value="toResult">
4.test.html的控制器indexCtrl.js，設置需要傳遞的參數$scope.abc和$scope.toResult，點擊事件toResult()里面其實就是一個$state.go('模板的參數',{app.js里面需要傳的參數的鍵名:需要傳的參數值})的方法
routerApp.controller('MyController', function($scope, $state) {
$scope.abc = "nice";//需要傳的參數值
$scope.def = 10;//需要傳的參數值
$scope.toResult = function(){
$state.go('result',{id: $scope.abc,number: $scope.def});
}
});
5.接收參數的模板result.html
<meta charset="UTF-8"> <div>hello world2</div>
6.result.html的控制器resultCtrl.js，這里使用$stateParams的方法去接收上一個頁面傳遞過來的參數
routerApp.controller('resultCtrl', function($scope, $state, $stateParams) {
var id = $stateParams.id;
var number = $stateParams.number;
console.log(id);
console.log(number);
});
項目目錄
js\app.js、indexCtrl.js、resultCtrl.js
lib\
jquery\jquery-1.11.3.min.js
angular\angular.js
angular-ui\angular-ui-router.js
templates\test.html、result.html
index.html
其實整個過程并不難，只是穿插在模板和控制器之間，容易讓人摸不著頭腦，只要分清楚具體的參數是對應哪一個，很容易理解。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
