angularjs范围（症结）：有模型父子范围（有和没有“点”） [英] angularjs scope(the crux): parent child scope having model(with and 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>

示例的与的点
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

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）在没有点的情况下（如在原始的范围VAR）
1.编辑父控制值，它会在所有其他值反映（child1和的child2）这个值
2.编辑 Child1 控制值，它会在的child2只反映
3.编辑 CHILD2 控制值，它会在的child2只反映
4.现在编辑父控制值，它会在家长CTRL只反映

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）在与点的情况下（如在范围对象）
按照A）1至A）4个步骤，你会看到在任何CTRL任何更改将在所有值反映了

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

这是为什么？

推荐答案

角为每个控制器一个子范围。其模型中的一个点东西不会改变这一点。

Angular creates a child scope for each controller. Having a dot in the model doesn't change anything to that.

当你在一个领域与 NG-模式=名进入'富'，这里就是角不随电流范围：

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'

现在，当你在一个领域与 NG-模式=user.name进入'富'，这里就是角基本上与电流控制器的范围呢：

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';

因此​​，如果父范围已经有了一个用户，与具有价值'一些previous价值'，你结束了

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 ----------/

为什么呢？由于范围中典型从父继承的范围，所以当评估 scope.user ，JavaScript并没有找到用户属性范围的对象，所以看起来它的原型（父范围），并发现它。无论是家长，因此，孩子共享一个用户对象， scope.user.name ='富'更改此共享对象的名称属性。

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屋！