发表于: 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取值方法
   }
})



返回列表 返回列表
评论

    分享到