Angular-ui-router进阶三之传参

来源：互联网发布：iphone7没有4g网络编辑：程序博客网时间：2024/06/06 08:35

版权声明：本文为博主原创文章，未经博主允许不得转载

传参方式

一般情况，主要用以下两种传参方式：

$state.go(''stateName", {paramName: param})
ui-sref="stateName({})"

下面来根据一个示例体验以下基本传参,

html代码：

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>index</title><link href="css/index.css" rel="stylesheet" /><script src="js/lib/angular/angular.min.js"></script><script src="js/lib/angular-ui-router/release/angular-ui-router.min.js"></script>    <script src="nestedViews/app2.js"></script></head><body ng-app="TrialApp" ng-controller="MainController"><header><h1>Nav Bar</h1></header><nav><h3>Side Bar</h3><br /><a ui-sref="1">Page 1</a><br /> <a ui-sref="2">Page 2</a><br /><a ui-sref="params({ID:1})">Params</a><br /></nav><div ui-view>           </div><footer>Copyright Nobody</footer></body></html>

上述代码中，演示了ui-sref传参，

<a ui-sref="状态名({参数名:变量（需要声明）})">Params</a><br />

app2.js代码（html中page1的链接可以忽略，我们示例重点在Page2和params上）：

'use strict';// Define `TrialApp` modulevar app = angular.module('TrialApp', ['ui.router']);// Define routersapp.config(function($stateProvider) {$stateProvider    .state('home', {    url: '/home',    templateUrl: 'demo2.html',    controller: 'MainController'    })    .state('1', {     url: '/Page1',    templateUrl: 'nestedViews/htmls/1/Page1.html',    controller: function($scope, $state) {    $scope.change = function() {    $state.go('1.1');    }    }    })    .state('2', {    url: '/Page2',    templateUrl: 'nestedViews/htmls/2/Page2.html',    controller: function($scope, $state) {    $scope.transfer = function() {    var id = document.getElementById("id").value;    console.log(id);    $state.go('params',{ID: id});    }    }    })    .state('params', {    url: '/params/:ID',    templateUrl: 'nestedViews/htmls/param.html',    controller: function($scope, $state, $stateParams) {    $scope.index = $stateParams.ID;    $scope.data = [{                id : 1,                name : "victor",                imgSrc: "img/Victor.jpg",                age:24                    },{                    id : 2,                name : "angela",                imgSrc: "img/Angela.jpg",                age:23                    },{                    id : 3,                name : "Mark",                imgSrc: "img/Mark.png",                age:12                    }];    $scope.exit = function() {    $state.go("2");    }    }    })});app.controller('MainController', function() {     //alert("Welcome to nested view demo!");});

上述代码中，我们设置了一个“params”状态，

URL中，切记加上传参名字和前面的冒号：，例如“：ID”，如果传参成功，url地址栏会显示具体参数值；

Controller中，含$stateParams参数，方便接收参数，里面创建了一个data数组，里面有我们传参便于最后演示的信息数据。

在状态“2”中，我们创建了传参的函数“transfer()”，用来演示通过$state.go()的方式传参。

Page2.html代码：

<div class="P2"><h3>View 2</h3><input type="text" placeholder="Input ID" id="id"/><button ng-click="transfer()">Transfer Params</button></div>

上述代码中，我们设置了一个搜索按钮，只要在输入框中，输入id，点击按钮即可切换到相应的页面看到相应的信息
param.html代码：

<h5>Person{{data[index - 1].id}}</h5><p>{{data[index - 1].name}}   {{data[index - 1].age}}</p><br /><img src="{{data[index - 1].imgSrc}}" /><br /><button type="button" ng-click="exit()">Exit</button>

接着我们来看下效果：

阅读全文

2 0