【问题标题】:How to pass object with ui router between controllers in a $state angularjs如何在 $state angularjs 中的控制器之间使用 ui 路由器传递对象
【发布时间】:2015-03-21 09:04:26
【问题描述】:

我正在使用this generator

我有我的用户模块:

require('angular/angular');
require('angular-ui-router');


angular.module('userModule', ['ui.router'])
    .config(['$stateProvider', function($stateProvider) {


    $stateProvider
        .state('utenti', {
            url: '/utenti',
            templateUrl: 'src/utenti/views/utenti.tpl.html',
            controller: 'RegistrationCrl',    
        })

        .state('access', {
            url: '/access',
            templateUrl: 'src/utenti/views/access.tpl.html',
            controller: 'AccessCtrl',
        });


}])
.controller('RegistrationCrl', require('./controllers/registrationLogin'))
.controller('AccessCtrl', require('./controllers/access'));

在我的 RegistrationCrl 中,我使用服务来创建新成员:

module.exports = function($scope, User, Member, $state, $location,$rootScope, $stateParams){
        $scope.registration = function(form){
            if(!form.$valid ){
                console.log('input error');
                return;
            }
            else{
                console.log('valid form');

                Member.create($scope.newMember,
                    function(data){
                        $state.go('access', data); 
                    },
                    function(data){
                        console.log(data);
                    }
                );

            }
        };
    };

我想在下一个与 accessCtl 相关的视图中使用该数据。我不想在我的 URL 中使用 id 并使用 $stateParams。

我的访问控制器是:

module.exports =  function($scope, User, Member, $state, $rootScope, $stateParams){
        console.log($state);
        console.log($stateParams);
    };

在那个 console.log 中,我没有发现我的对象是通过 $state.go 传递的。

【问题讨论】:

  • 你不能像传递controller 一样传递$state 中的数据吗? .state('access', { url: '/access', templateUrl: 'src/utenti/views/access.tpl.html', controller: 'AccessCtrl', newData: 'whatever' }); 它适用于路线。
  • 我已经阅读了相关内容,但我想念的是如何将注册的数据结果放入 newData 属性中,我应该在我的 registrationCrl 中写什么? $state.go('access', {newData:data} ?
  • 哦,我误会你了。我以为您正在尝试将固定值传递给您的控制器。所以,我不知道。对不起。

标签: angularjs angular-ui-router


【解决方案1】:

您可以通过 $stateParams 将数据传递给下一个视图。 在目标路由中添加参数

 $stateProvider
    .state('utenti', {
        url: '/utenti',
        templateUrl: 'src/utenti/views/utenti.tpl.html', 
        params: { myParam: null},
        controller: 'RegistrationCrl',    
    })

将数据传递到下一个视图

  $state.go("utenti",{myParam:{"data":"data"}})

并在下一个控制器中获取数据

         $scope.paramDetails=$stateParams.myParam; 

【讨论】:

    【解决方案2】:

    据我了解,您不能在状态之间传递对象作为参数。一种选择是使用service,您注入它的所有控制器都可以访问它。

    对于分享service Passing data between controllers in Angular JS?,已经有一个很好的答案

    【讨论】:

    • 我已阅读该答案,但使用控制器可能会有点混乱。如果我需要在更多视图中使用这些数据,我必须每次都添加一个函数或一个 nee 服务。如果我不能传递对象,我可以传递对象的一些属性吗?
    • 传递一些对数据的引用,然后可能在您的后端搜索它。
    【解决方案3】:

    使用 ui.router 的 resolve 语句

     resolve:{
          data: ['$stateParams', function($stateParams){
              return $stateParams.data;
          }]
    

    【讨论】:

    • 我在访问状态下使用 resolve 语句。但是在我的另一个控制器(RegistrationCtr)中,我如何将该数据分配给我的数据? :) $state.go('access', data) ?
    【解决方案4】:

    您可以通过状态参数进行设置。

    $state.get('details').Obj= {};
    $state.go('details);
    

    在附加到此状态的另一个控制器中进行如下访问。

    $state.get('details').Obj
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2015-12-16
      • 2020-06-07
      • 1970-01-01
      • 1970-01-01
      • 2015-09-10
      • 2023-04-04
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多