angular不同页面传参数的问题

最新推荐文章于 2022-09-29 14:28:18 发布

微微一芯

最新推荐文章于 2022-09-29 14:28:18 发布

阅读量1.1k

点赞数 2

分类专栏： angular 文章标签： angular 传值控制器 control url

本文链接：https://blog.youkuaiyun.com/wuyan1001/article/details/53515390

版权

angular 专栏收录该内容

2 篇文章

订阅专栏

一. 基于ui-router的页面跳转传参

(1) 在AngularJS的app.js中用ui-router定义路由，比如现在有两个页面，一个页面（producers1.html）放置了多个producers，点击其中一个目标，页面跳转到对应的producer页面，同时将producerId这个参数传过去。

.state('producers', {
    url: '/producers',
    templateUrl: 'views/producers1.html',
    controller: 'ProducersCtrl'
})
.state('producer', {
    url: '/producer/:producerId',
    templateUrl: 'views/producer2.html',
    controller: 'ProducerCtrl'
})

(2) 在producers.html中，定义点击事件，比如ng-click="toProducer(producerId)"，在Producers1Ctrl中，定义页面跳转函数 (使用ui-router的$state.go接口)：

app.controller('Producers1Ctrl', function ($scope, $state) {
    $scope.toProducer = function (producerId) {
        $state.go('producer', {producerId: producerId});
    };
});

(3) 在Producer2Ctrl中，通过ui-router的$stateParams获取参数producerId：

app.controller('Producer2Ctrl', function ($scope, $state, $stateParams) {
   var producerId = $stateParams.params.producerId;    
    //$state, $stateParams要配合使用，都要注入第二个页面的控制器中
});

二. 自定义个myApp.factory('dataService', function() { }); 然后在controller 注入就可以互相传值了，网页的说法，参考而已，未仔细研究。

当然，传值方式还有多种，比如还有$rootScope，sessionStorage等。。