如何在angularjs UI-路由器中的状态之间共享$Scope数据？

Question

如何在angularjs UI-路由器中的状态之间共享$Scope数据？

如果不在父控制器中使用服务或构造监视程序，那么如何让子状态访问主控制器的$scope.

  .state("main", {
      controller:'mainController',
      url:"/main",
      templateUrl: "main_init.html"
  })  
  .state("main.1", {
      controller:'mainController',
      parent: 'main',
      url:"/1",
      templateUrl: 'form_1.html'
  })  
  .state("main.2", {
      controller:'mainController',
      parent: 'main',
      url: "/2",
      templateUrl: 'form_2.html'
  })

我无法以子状态访问mainController作用域-或者更确切地说，我得到了该作用域的另一个实例-这不是我想要的。我觉得我错过了一些简单的东西。状态对象中有一个共享数据配置选项，但我不确定是否应该将它用于类似的事情。

Answer 1

I 创建工作柱塞，演示如何使用$scope还有UI-路由器。状态定义不变：$stateProvider    // States  .state("main", {       controller:'mainController',       url:"/main",       templateUrl: "main_init.html"   })     .state("main.1", {       controller:'mainController',       parent: 'main',       url:"/1",       templateUrl: 'form_1.html'   })     .state("main.2", {       controller:'mainController',       parent: 'main',       url: "/2",       templateUrl: 'form_2.html'   })但是每个州都有不同的控制器。为什么？因为每个view每一个国家获得new 实例定义的controller..所以既然我们mainController像下面这样，我们可以确定，如果我们导航到状态'main.2'它将被实例化两次。controller('mainController', function ($scope) {   $scope.Model = $scope.Model || {Name : "xxx"};})但是我们能看到的这里，我们检查一下$scope.Model已经存在了.。如果不是(母国)我们实例化它新意 {Name : "xxx"}.嗯，我的意思是：只有父国会在$scope.Model..其他人都会把它填满的。多么，怎样?答案是：仅通过视图层次结构进行范围继承请记住，只有在状态视图嵌套的情况下，范围属性才会向下继承。范围属性的继承与状态嵌套无关，与视图(模板)嵌套有关。您完全可能拥有嵌套状态，其模板在站点中的各种非嵌套位置填充UI视图。在此场景中，不能期望在子状态视图中访问父状态视图的作用域变量。因此，正如文件中所述。因为我们的子视图嵌套在父视图中，所以范围是继承的。理解Scopes在AngularJS中，子作用域通常是从其父作用域继承的。...有“.”在您的模型中，将确保原型继承正在发挥作用。// So, use<input type="text" ng-model="someObj.prop1"> // rather than<input type="text" ng-model="prop1">.仅此而已。我们从UI-Router视图和角度范围，因为我们巧妙地使用了引用类型(Model)，即确实有'.'点入ng-model定义-我们现在可以共享数据注：有点“。”在ng-model="Model.PropertyName简单地说，有一个reference对象Model {}拥有一些财产：PropertyName

Answer 2

你可以通过整个范围$rootScope..如果您只需要范围的一部分，UI-路由器有一个自定义数据特征。这是如何做一个多步骤的形式。我需要路线包含关于他们在流程中的步骤的信息。首先，我有一些UI路由器的路由：  // Sign UP routes   .state('sign-up', {     abstract: true,     url: '/sign-up',     controller: 'SignupController',     templateUrl: 'sign-up/index.html',   })   .state('sign-up.start', {     url: '-start',     templateUrl: 'sign-up/sign-up.start.html',     data: { step: 0, title: 'Welcome to Mars!', },   })   .state('sign-up.expertise', {     url: '-expertise',     templateUrl: 'sign-up/sign-up.expertise.html',     data: { step: 1, title: 'Your Expertise'},   })注意事项：这个data元素在每条路径中。这个abstract州SignupController..这是这个多步表单的唯一控制器。这个abstract不是必需的，但是对于这个用例来说是有意义的。SignupController.jsangular.module('app').controller('SignupController', function($scope, $state) {   $scope.state = $state;});在这里，我们得到了UI-路由器的$state穿上它$scope以下是主要模板“登录/index.html”，如下所示：<h2>{{state.current.data.title}}</h2><div>This is a multi-step-progress control {{state.current.data.step}}</div><form id="signUpForm" name="signUpForm" novalidate>   <div ui-view></div></form>子模板可以是他们喜欢的任何东西。

Answer 3

其思想是在父->子继承中使用范围：&nbsp;.state("main",&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;controller:'mainController', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;abstract:&nbsp;true, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url:"/main", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;templateUrl:&nbsp;"main_init.html" &nbsp;&nbsp;})&nbsp;&nbsp; &nbsp;&nbsp;.state("main.1",&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;controller:'mainController1', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parent:&nbsp;'main', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url:"/1", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;templateUrl:&nbsp;'form_1.html' &nbsp;&nbsp;})&nbsp;&nbsp; &nbsp;&nbsp;.state("main.2",&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;controller:'mainController2', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;parent:&nbsp;'main', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url:&nbsp;"/2", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;templateUrl:&nbsp;'form_2.html' &nbsp;&nbsp;})比使用简单，您有3个控制器，一个是共享的(MainController)，每个视图都有自己的。