- 首页
- 其他开发
- angularjs 范围(关键):具有模型的父子范围(带和不带“点")
angularjs 范围(关键):具有模型的父子范围(带和不带“点")
[英] angularjs scope(the crux): parent child scope having model(with and without 'dot')
本文介绍了angularjs 范围(关键):具有模型的父子范围(带和不带“点")的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
示例没有点"http://jsfiddle.net/CmXaP/168/
<div ng-controller="parent">父 ctrl 值:<input type="text" data-ng-model="name"/><div ng-controller="child1">Child1 ctrl 值:<input type="text" data-ng-model="name"/><div ng-controller="child2">Child2 ctrl 值:<input type="text" data-ng-model="name"/>
父 ctrl 值(在 child1 ctrl 块之后):{{name}}
示例 WITH 'dot'http://jsfiddle.net/CmXaP/167/
<div ng-controller="parent">父 ctrl 值:<input type="text" data-ng-model="user.name"/><div ng-controller="child1">Child1 ctrl 值:<input type="text" data-ng-model="user.name"/><div ng-controller="child2">Child2 ctrl 值:<input type="text" data-ng-model="user.name"/>
父 ctrl 值(在 child1 ctrl 块之后):{{user.name}}
Javascript 代码
var ngapp = angular.module('myapp',[]);ngapp.controller("parent", ['$scope', function($scope) {$scope.user = {名称:'阿尼尔'};}]);ngapp.controller("child1", ['$scope', function($scope) {}]);ngapp.controller("child2", ['$scope', function($scope) {}]);
A) 在没有点"的情况下(如作用域中的原始变量)1. 编辑Parent ctrl 值"，它将反映在所有其他值(child1 和 child2)中2. 编辑Child1 ctrl 值"，它只会反映在 child2 中3. 编辑Child2 ctrl 值"，它只会反映在 child2 中4.现在编辑'Parent ctrl value'，它只会反映在Parent ctrl中
B) 在带有点"的情况下(如范围内的对象)按照 A)1 到 A)4 步骤，您将看到任何 ctrl 中的任何更改都将反映在所有值中
为什么会这样?
解决方案
Angular 为每个控制器创建一个子作用域.在模型中有一个点不会改变任何东西.
当您在带有 ng-model="name" 的字段中输入 'foo' 时，以下是 angular 对当前控制器范围的作用:
scope.name = 'foo';
如果父作用域中已经有 name 字段，则不受影响.所以你最终得到
parentScope --->名称 -->'一些以前的价值'范围 ---------->名称 -->'富'
现在，当您在带有 ng-model="user.name" 的字段中输入 'foo' 时，以下是 angular 对当前控制器范围所做的基本操作:
if (!angular.isDefined(scope.user)) {scope.user = {};}scope.user.name = 'foo';
因此，如果父作用域已经有一个用户，并且 name 属性的值为某个先前的值"，那么您最终会得到
parentScope -->用户------>名称---->'富^范围 - - - - -/
为什么?因为范围原型通常从父范围继承，所以在评估 scope.user 时，JavaScript 没有在范围对象上找到 user 属性，所以它在原型(父作用域)，并找到它.因此，父级和子级共享一个用户对象，并且 scope.user.name = 'foo' 更改此共享对象的 name 属性.
Example WITHOUT 'dot'
http://jsfiddle.net/CmXaP/168/
<div ng-app="myapp">
<div ng-controller="parent">
Parent ctrl value: <input type="text" data-ng-model="name" />
<div ng-controller="child1">
Child1 ctrl value: <input type="text" data-ng-model="name" />
<div ng-controller="child2">
Child2 ctrl value: <input type="text" data-ng-model="name" />
</div>
</div>
Parent ctrl value(after child1 ctrl block): {{name}}
</div>
</div>
Example WITH 'dot'
http://jsfiddle.net/CmXaP/167/
<div ng-app="myapp">
<div ng-controller="parent">
Parent ctrl value: <input type="text" data-ng-model="user.name" />
<div ng-controller="child1">
Child1 ctrl value: <input type="text" data-ng-model="user.name" />
<div ng-controller="child2">
Child2 ctrl value: <input type="text" data-ng-model="user.name" />
</div>
</div>
Parent ctrl value(after child1 ctrl block): {{user.name}}
</div>
</div>
Javascript code
var ngapp = angular.module('myapp',[]);
ngapp.controller("parent", ['$scope', function($scope) {
$scope.user = {
name : 'anil'
};
}]);
ngapp.controller("child1", ['$scope', function($scope) {}]);
ngapp.controller("child2", ['$scope', function($scope) {}]);
A) In case of without 'dot' (like primitive var in scope)
1. Edit 'Parent ctrl value' and it will reflect in all other values(child1 and child2) with this value
2. Edit 'Child1 ctrl value' and it will reflect in child2 only
3. Edit 'Child2 ctrl value' and it will reflect in child2 only
4. Now edit 'Parent ctrl value' and it will reflect in Parent ctrl only
B) In case of with 'dot' (like object in scope)
Follow A)1 to A)4 steps and you will see any changes in any ctrl will reflect in all values
why this is so?
解决方案
Angular creates a child scope for each controller. Having a dot in the model doesn't change anything to that.
When you enter 'foo' in a field with ng-model="name", here's what angular does with the scope of the current controller:
scope.name = 'foo';
If there was already a name field in the parent scope, it's unaffected. So you end up with
parentScope ---> name --> 'some previous value'
scope ---------> name --> 'foo'
Now when you enter 'foo' in a field with ng-model="user.name", here's what angular basically does with the scope of the current controller:
if (!angular.isDefined(scope.user)) {
scope.user = {};
}
scope.user.name = 'foo';
So, if the parent scope already had a user, with a name attribute having the value 'some previous value', you end up with
parentScope --> user ------> name ----> 'foo
^
scope ----------/
Why? Because the scope prototypically inherits from the parent scope, so when evaluating scope.user, JavaScript doesn't find a user attribute on the scope object, so it looks for it on the prototype (the parent scope), and finds it. Both the parent and the child thus share a single user object, and scope.user.name = 'foo' changes the name attribute of this shared object.
这篇关于angularjs 范围(关键):具有模型的父子范围(带和不带“点")的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
