在不使用服务或在父控制器中构造观察器的情况下,如何使子状态访问主控制器的$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范围-而是正在获取该范围的另一个实例- 不是我想要的。我觉得我缺少一些简单的东西。在状态对象中有一个共享的数据配置选项,但是我不确定是否应该将其用于这样的事情。
我创建了工作的插件,展示了如何使用$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',它将被实例化两次。
view
new
controller
mainController
'main.2'
controller('mainController', function ($scope) { $scope.Model = $scope.Model || {Name : "xxx"}; })
但是我们在这里可以看到的是,我们检查是否$scope.Model已经存在…,如果没有 (父状态) ,则使用 新实例实例 化它 {Name : "xxx"} 。
$scope.Model
{Name : "xxx"}
好吧,我要说的是:只有父国家才能初始化$scope.Model。所有其他人都将得到满足。怎么样?好吧,这就是答案:
States-%26-Nested-Views#scope-inheritance-by-view-hierarchy-only)
请记住,如果状态的视图是嵌套的,则范围属性仅沿状态链继承。范围属性的继承与状态的嵌套无关,而与视图(模板)的嵌套无关。 完全有可能存在嵌套状态,这些状态的模板会在站点内各个非嵌套位置填充ui视图。在这种情况下,您不能期望在子状态的视图中访问父状态视图的范围变量。
请记住,如果状态的视图是嵌套的,则范围属性仅沿状态链继承。范围属性的继承与状态的嵌套无关,而与视图(模板)的嵌套无关。
完全有可能存在嵌套状态,这些状态的模板会在站点内各个非嵌套位置填充ui视图。在这种情况下,您不能期望在子状态的视图中访问父状态视图的范围变量。
因此,如文档中所述。因为我们的子视图嵌套在父视图中,所以继承了作用域。
在AngularJS中,子作用域通常在原型上从其父作用域继承。 … 有一个 ‘。’ 在您的模型中,将确保原型继承在起作用。
在AngularJS中,子作用域通常在原型上从其父作用域继承。 …
有一个 ‘。’ 在您的模型中,将确保原型继承在起作用。
// So, use <input type="text" ng-model="someObj.prop1"> // rather than <input type="text" ng-model="prop1">.
就是这样。我们从UI-Router视图和角度范围继承,并且因为我们巧妙地使用了引用类型( Model ),即定义中确实包含'.'点ng-model-我们现在可以共享数据
UI-Router
Model
'.'
ng-model
注意:点号为“。” 在ng-model="Model.PropertyName简单的手段,是有 reference 对象Model {}的一些属性:PropertyName
ng-model="Model.PropertyName
reference
Model {}
PropertyName
在这里检查工作示例