Question

我正在学习angularJS并创建一个使用ui-router的Web应用程序。

我已经定义了如下状态：

angular.module('test', [])
.config(function($stateProvider){
  $stateProvider.
       state('root',{
           url: '/',
           abstract:true,
           templateUrl: '/root.html',
           controller: 'MyController'
       })
       .state('root.route1',{
           url: '/route1',
           parent: 'root',
           views:{
               '':{
                   templateUrl: '/route1.html'
                  }
               'estimatedCost@':{
                   templateUrl: '/esitmatedCost.html'
                  }
            }
       })
       .state('root.route2',{
           url: '/route2',
           parent: 'root',
           views:{
               '':{
                   templateUrl: '/route2.html'
                  }
               'estimatedCost@':{
                   templateUrl: '/esitmatedCost.html'
                  }
            }
       })
    });

在route1和route2之间来回导航时，我想从MyController共享范围变量。当我从route1导航到route2时，它失去了范围变量的值。

我不确定我做错了什么。

任何人都可以帮助我吗？提前谢谢。

Answer 1

我还没有使用ui-router，但是我在过去几年里一直与AngularJS合作过，这就是语言在过去一直有效的方式。

控制器的主要目的是控制单个模板上的数据。这些控制器可以通过AngularJS工厂相互通信，通常称为服务。在您的情况下，您可能希望使用服务，因为控制器在成功路由更改时会被破坏。

angular.module('test', [])
  .factory('myFactory', function() {
    var info = "Hello World";

    return {
      info: info
    };
  })
  .controller('CtrlOne', function($scope, myFactory) {
    $scope.info = myFactory.info;
  })
  .controller('CtrlTwo', function($scope, myFactory) {
    $scope.info = myFacotry.info;
  });

然后，您可以在两个不同的视图上使用这两个控制器，它们共享来自连接它们的服务的变量。

Answer 2

使用 $ stateParams 在两个状态之间传递参数。休息以下步骤：

使用 params 对象定义您的状态。

  .state('route.route1', {
            url: 'your url name',
            params: {
                nameOfParamObj: null
            },
            controller: 'your controller',
            templateUrl: 'your template url',
    })

从要发送范围数据的控制器用作休闲

$ state.go（toState，params，options）;
在toState控制器中使用 $ stateParams
捕获状态参数
$stateParams.yourParamObjectName

确保 $ stateParams ， $ state 服务作为相关控制器中的依赖项查看官方的ui-router文档Here。

在angular.ui-router中使用多个状态和单个控制器

2 个答案: