如何共享状态之间$范围数据angularjs UI的路由器？ [英] How do I share $scope data between states in angularjs ui-router?

问题描述

如果不使用某项服务或父控制器构造观察家，怎么会人给孩子规定进入主控制器的$范围。

  .STATE（主，{
          控制器：'mainController'，
          网址：/主
          templateUrl：main_init.html
      }）
      .STATE（main.1，{
          控制器：'mainController'，
          家长：'主'，
          网址：/ 1
          templateUrl：form_1.html
      }）
      .STATE（main.2，{
          控制器：'mainController'，
          家长：'主'，
          URL：/ 2，
          templateUrl：form_2.html
      }）
 

我不能够访问子状态mainController范围 - 或者更确切地说，我理解的范围的另一个实例 - 不是我想要的。我觉得我失去了一些东西简单。
有一个在状态对象共享数据配置选项，但我不知道这是否应该用于这样的事情。

解决方案

工作plunker ，展示了如何使用 $范围和UI的路由器。

状态定义是不变的：

  $ stateProvider
    // 状态
 .STATE（主，{
      控制器：'mainController'，
      网址：/主
      templateUrl：main_init.html
  }）
  .STATE（main.1，{
      控制器：'mainController'，
      家长：'主'，
      网址：/ 1
      templateUrl：form_1.html
  }）
  .STATE（main.2，{
      控制器：'mainController'，
      家长：'主'，
      URL：/ 2，
      templateUrl：form_2.html
  }）
 

但每个州可以有不同的控制器。为什么？因为每个视图每个状态的可获得新 实例的定义控制器。因此，虽然我们有 mainController 类似下面，我们可以肯定，如果我们导航到状态'main.2 将被两次实例化。

 控制器（'mainController'，函数（$范围）{
  $ scope.Model = $ scope.Model || {名称：XXX};
}）
 

但是，我们可以看到这里 ，是我们检查，如果 $ scope.Model 已exsits ......如果不是的（父状态）的我们是新intance <$ C $初始化它C> {名称：XXX} 。

那么，我要说的是：只有父状态将初始化的 $ scope.Model 。所有的人将获得已填写。怎么样？那么这里就是答案：

Scope通过视图层次只有

继承

  记

记住，如果你的国家的意见是嵌套作用域属性只继承下来的状态链。作用域属性的继承无关，与你的国家的嵌套和一切与你的视图（模板）嵌套。

  
  

这是完全可能的，你嵌套状态的模板填充在站点内的各种非嵌套位置UI的意见。在这种情况下，你不能指望子女国的意见内访问的父状态视图的范围变量。

因此​​，如文档中说明。因为我们的子视图嵌套在父视图，其范围是继承。

了解作用域

  

在AngularJS，一个孩子正常的范围从中典型其父继承的范围。结果
   ...

  
  

有一个。在您的模型将确保原型继承中发挥作用。

  //所以，使用
＆LT;输入类型=文本NG模型=someObj.prop1＆GT;
// 而不是
＆LT;输入类型=文本NG模型=为prop1取代。
 

就是这样。我们得到继承从 UI-路由器的观点和角度范围，因为我们巧妙地使用了引用类型（ 模式 ），即确实有 点在 NG-模型定义 - 我们可以共享数据现在

的注：有圆点。在 NG-模式=Model.PropertyName 只是意味着，有一个 参考 对象模式{} 一些属性： Model.PropertyName 的

这里检查工作示例

Without using a service or constructing watchers in the parent controller, how would one give children states access to the main controller's $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'
      })  

I'm not able to access the mainController scope in child state--or rather I'm getting another instance of that scope--not what I want. I feel I'm missing something simple. There is a shared data config option in the state object but I'm not sure if this should be used for something like this.

解决方案

I created working plunker, showing how to use $scope and UI-Router.

The state definition is unchanged:

$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'
  })  

But each state can have different controller. Why? because each view of each state gets new instance of defined controller. So while we have mainController like the one below, we can be sure, that if we navigate to state 'main.2' it will be instantiated twice.

controller('mainController', function ($scope) {
  $scope.Model = $scope.Model || {Name : "xxx"};
})

But what we can see here, is that we check if $scope.Model already exsits... and if not (Parent state) we instantiate it with new intance {Name : "xxx"}.

Well, what I am saying is: only parent state will init the $scope.Model. All others will get that already filled. How? Well here is the answer:

Scope Inheritance by View Hierarchy Only

Keep in mind that scope properties only inherit down the state chain if the views of your states are nested. Inheritance of scope properties has nothing to do with the nesting of your states and everything to do with the nesting of your views (templates).

It is entirely possible that you have nested states whose templates populate ui-views at various non-nested locations within your site. In this scenario you cannot expect to access the scope variables of parent state views within the views of children states.

So, as stated in the documentation. Because our child views are nested in the parent view, the scope is inherited.

Understanding Scopes

In AngularJS, a child scope normally prototypically inherits from its parent scope.
...

Having a '.' in your models will ensure that prototypal inheritance is in play.

// So, use
<input type="text" ng-model="someObj.prop1"> 
// rather than
<input type="text" ng-model="prop1">.

And that's it. We get inheritance from UI-Router views and angular scopes, and because we smartly used a reference type (Model), i.e. do have '.' dot in ng-model definition - we can share data now

NOTE: having dot '.' in the ng-model="Model.PropertyName simply means, that there is a reference object Model {} with some property: Model.PropertyName

Check the working example here

这篇关于如何共享状态之间$范围数据angularjs UI的路由器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！