我创建了工作 plunker,展示了如何使用$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
喜欢下面的那个,但我们可以肯定,如果我们导航到 state '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
在此处检查工作示例