如何在 angularjs ui-router 中的状态之间共享 $scope 数据? [英] How do I share $scope data between states in angularjs ui-router?

问题描述

如果不使用服务或在父控制器中构建观察者，如何让子状态访问主控制器的 $scope.

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

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

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.

推荐答案

我创建了工作 plunker，展示了如何使用 $scope 和 UI-Router.

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

状态定义不变:

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

但是每个状态可以有不同的控制器.为什么?因为每个 state 的每个 view 都会获得定义的 controller 的 new instance.因此，虽然我们有像下面这样的 mainController，但我们可以肯定，如果我们导航到状态 'main.2'，它将被实例化两次.

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"};
})

但是我们可以在这里看到的是，我们检查是否$scope.Model 已经存在...如果不是 (Parent state) 我们用 new intance {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"}.

好吧，我要说的是:只有父状态会初始化 $scope.Model.所有其他人都会得到已经填满的.如何?答案是:

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:

请记住，如果您的状态的视图是嵌套的，那么范围属性只会沿状态链向下继承.范围属性的继承与状态的嵌套无关，而与视图(模板)的嵌套有关.

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).

您完全有可能拥有嵌套状态，其模板在您站点内的各种非嵌套位置填充 ui-view.在这种情况下，您不能期望在子状态的视图中访问父状态视图的范围变量.

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.

在 AngularJS 中，子作用域通常原型继承自其父作用域.
...

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">.

就是这样.我们从 UI-Router 视图和角度范围获得继承，并且因为我们巧妙地使用了引用类型(Model)，即确实有 ng-model 定义中的 >'.' 点 - 我们现在可以共享数据

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

注意:有点."在 ng-model="Model.PropertyName 中只是意味着，有一个 reference 对象 Model {}带有一些属性:PropertyName

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

检查此处的工作示例

这篇关于如何在 angularjs ui-router 中的状态之间共享 $scope 数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！