angularJS 中的传参

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

今天总结一下 angularJS 传参的 3种方式：(配合 ui-router)

现在有两个页面，page1.html 和 page2.html，现由 page1.html 向 page2.html 传递参数（name、age）

1）params: 传递静态参数--> 应用场景：初始化传递参数

第一步：在路由中进行配置，准备参数：

// *1. params 传递静态参数
.state('state2',{
url:"/page2",
templateUrl: "views/page2.html",
controller: 'page2Controller',
params: { name:'jcy', age:'22' }
})

第二步：page2Controller 中接收参数：

.controller('page2Controller', ['$scope', '$state', '$stateParams', function($scope, $state, $stateParams){ // * 获取参数：
// $scope.paramsToPage2 = $stateParams;
// 或
$scope.paramsToPage2 = $state.params; console.log($state.params); }])

第三步：page2.html 中应用参数：

<h1>Page2</h1>
<hr/>
<div>
name：{{ paramsToPage2.name }} <br><br> age: {{ paramsToPage2.age }} <br><br>
</div>

查看效果：

ok,成功；

2） ui-sref：传递参数--> 应用场景：点击页面上的 < a ui-sref="???"></a> 进行状态切换时，传递参数

第一步：page1.html 中配置，准备参数

第二步：路由中配置，得到形式参数

说明一下：在路由器中得到形式参数，有三种方式

*1. 在 url 中，用形如 url: "/page2/:name/:age" 的方式

*2. 在 url 中，用形如 url:"/page2/{name}/{age}" 的方式

*3. 不在 url 中配置接收形参的方式，取而代之，有 params 中，用形如 params: {"name": null, "age":null} 的方式，声明欲接收的参数名；

重点提一下，params 中声明的参数的 key值，一定要与 ui-sref 中欲传递的参数 key值相同；

// *2. 应用 ui-sref形式传参，在 router 中的 3种配置方式
.state('state2',{
// url: "/page2/:name/:age", // 方式一: 会在地址栏显示参数
// url:"/page2/{name}/{age}", // 方式二: 会在地址栏显示参数
url:"/page2", // 方式三：不会在地址栏里显示参数，
// 但是必须在 params 中定义与参数 key值相同的同名变量
templateUrl: "views/page2.html",
controller: "page2Controller",
params: {"name": null, "age":null} // 配合方式三，使用; (值不一定非得是 null, 是什么都可以，只要key值不变，value都会被传过来的值覆盖)
})

第三步：page2Controller 中接收参数：

第四步：page2.html 中应用参数：

<h1>Page2</h1>
<hr/>
<div>
name：{{ paramsToPage2.name }} <br><br> age: {{ paramsToPage2.age }} <br><br>
</div>

查看效果：

ok,成功；

3） $state.go() 传递参数-->应用场景：在应用逻辑中进行状态切换

举例： page1.html 中有个 button 按钮，注意, 不是 ui-sref 形式的按钮，just only a normal button，点击 button 实现状态切换的效果

第一步：page1.html 中的 html

<button ng-click="toPage2('jcy','22')">Page 2</button>

第二步：路由配置

.state('state1',{
url:"/page1",
templateUrl: "views/page1.html",
controller: 'page1Controller'
})
.state('state2',{
url:"/page2",
templateUrl: "views/page2.html",
controller: "page2Controller",
params: {"name": null, "age":null}
})

第三步：page1Controller 中书写逻辑

.controller('page1Controller', ['$scope', '$state', function($scope, $state){
// * 传递参数：
// $state.go( state, {arg1:xxx, arg2；xxx, .....} ) 形式传递参数
// $state.go() 接收两个参数；第1个：是要切换到的 state; 第2个：是要传递的参数； $scope.toPage2 = function(arg1, arg2){
$state.go('state2', {'name': arg1, 'age': arg2}); // 传递的参数 key值，一定要与模板为page2.html的路由中的 params 中的参数 key 值相同
} }])

第四步：page2Controller 中接收参数

第五步：page2.html 中应用参数：

<h1>Page2</h1>
<hr/>
<div>
name：{{ paramsToPage2.name }} <br><br> age: {{ paramsToPage2.age }} <br><br>
</div>

查看效果：