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 中配置，准备参数

<a ui-sref="state2{{name:'jcy', age:'22'}}">Page 2</a>

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

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

　　*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 中接收参数：

.controller('page2Controller', ['$scope', '$state', '$stateParams', function($scope, $state, $stateParams){

        // * 获取参数：

        // $scope.paramsToPage2 = $stateParams;

        // 或

        $scope.paramsToPage2 = $state.params;

        console.log($scope.paramsToPage2);

    }])

第四步：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

    <!-- 传递 两个参数：arg1为name, arg2为age -->

    <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 中接收参数

    .controller('page2Controller', ['$scope', '$state', '$stateParams', function($scope, $state, $stateParams){

        // * 获取参数：

        // $scope.paramsToPage2 = $stateParams;

        // 或

        $scope.paramsToPage2 = $state.params;

        console.log($scope.paramsToPage2);

    }])

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

<h1>Page2</h1>

<hr/>

<div>

    name：{{ paramsToPage2.name }} <br><br>

    age: {{ paramsToPage2.age }} <br><br>

</div>

查看效果：

ok，打完收工；

个人总结，转载请注明出处，谢谢；

巴特西

angularJS 中的传参

最新文章

热门文章