zoukankan      html  css  js  c++  java
  • angularJS 传参的四种方法 【修改】

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

    .state('producers', {
        url: '/producers',
        templateUrl: 'views/producers.html',
        controller: 'ProducersCtrl'
    })
    .state('producer', {
        url: '/producer/:producerId', //方法一;通过路由 传参   直接把参数挂载在url上
      url: '/producer' //方法二: 通过 params templateUrl: 'views/producer.html',
      params:{producerId:""}, //方法二:路由设置参数 controller: 'ProducerCtrl' })


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

    .controller('ProducersCtrl', function ($scope, $state) {
        $scope.toProducer = function (producerId) {       //方法二:  $state.go("url",{}) 传递参数
            $state.go('producer', {producerId: producerId}); 通过 go接口进行传参时,要注意   在接受参数的路由下要配置 params:{producerId:""} 键名是相同的 否则接受不到参数
        };
    });
    


    (3) 在ProducerCtrl中,通过ui-router的$stateParams获取参数producerId,譬如:

    .controller('ProducerCtrl', function ($scope, $state, $stateParams) {
       var producerId = $stateParams.producerId;   // 获得参数   $stateParams.key     方法二
    });
    
  • 相关阅读:
    CodeForces
    CodeForces
    CodeForces 718C && HDU 3572 && Constellation
    CodeForces
    USACO 5.4 tour的dp解法
    10.22~10.28一周经典题目整理(meeting,BZOJ4377,POJ3659)
    codeforces 724D
    codeforces 724C
    hdu5909 Tree Cutting
    hdu5822 color
  • 原文地址:https://www.cnblogs.com/baota/p/6640648.html
Copyright © 2011-2022 走看看