发表于: 2016-07-07 00:56:25
1 2405
今天完成的事情:弄ui-router的概念,学会了如何定义路由,如何用$state.go做跳转页面并传递参数
明天计划的事情:继续研究angularjs。
遇到的问题:
收获:用ui-router进行页面跳转并传参
步骤一:先配置路由
var view = angular.module('view', ['ui.router']);
// 定义路由
view.config(function ($stateProvider, $urlRouterProvider){
$urlRouterProvider.when("", "/"); // 这个参数好像是初始化第一个页面
$stateProvider
// 配置第一个页面
.state("/", {
url: "/",
templateUrl: "test1.html",
controller:"test1Ctrl"
})
// 配置第二个页面
.state("test2", {
url:"/test2/:text",
templateUrl: "test2.html",
controller:"test2Ctrl"
});
});
步骤二:使用$state.go跳转页面并传参
// 在第一个页面点击按钮跳转到第二个页面并传入text
view.controller('test1Ctrl', function ($scope, $state) {
$scope.toTest2 = function () {
var text = "我来自test1";
$state.go('test2', {text: text}); // 第一个参数所以到达的页面,第二个参数所传的值
};
});
步骤三:使用$state.params取出参数
// 在第二个页面点击按钮取出第一个页面所传的text的值
view.controller('test2Ctrl', function ($scope, $state) {
$scope.test2 = function () {
console.log($state.params.text); // $state.params.text取值方法
}
})
评论