一尘不染

如何在angularjs ui-router中的状态之间共享$ scope数据?

javascript

在不使用服务或在父控制器中构造观察器的情况下,如何使子状态访问主控制器的$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范围-或者我正在获取该范围的另一个实例-
不是我想要的。我觉得我缺少一些简单的东西。在状态对象中有一个共享的数据配置选项,但是我不确定是否应该将其用于这样的事情。


阅读 302

收藏
2020-04-25

共1个答案

一尘不染

我创建了工作的插件,展示了如何使用$scope和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'
  })

但是每个状态可以有不同的控制器。为什么?因为每个view每个 获得new 实例
的定义controller。因此,尽管我们mainController喜欢下面的代码,但可以肯定的是,如果导航到状态'main.2',它将被实例化两次。

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

但是我们可以在这里看到的是,我们检查是否$scope.Model已经存在…,如果没有(父状态),则使用 新实例实例 化它 {Name : "xxx"}

好吧,我要说的是:只有父国家才能初始化$scope.Model。所有其他人都将得到满足。怎么样?好吧,这就是答案:

仅按视图层次结构的作用域继承

请记住,如果状态的视图是嵌套的,则作用域属性仅沿状态链继承。范围属性的继承与状态的嵌套无关,而与视图(模板)的嵌套无关。

完全有可能存在嵌套状态,这些状态的模板会在站点内各个非嵌套位置填充ui视图。在这种情况下,您不能期望在子状态的视图中访问父状态视图的范围变量。

因此,如文档中所述。因为我们的子视图嵌套在父视图中,所以继承了作用域。

了解范围

在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

2020-04-25