Angularjs Scope prototype Chain

We know that scope can be inherited. The inheritance of scope and the JS prototype chain are the same concept.

    <ng-controller= "Parentctrl">        {{name}}       < Ng-controller = "Childctrl">           {{name}}         </ Div >    </ Div >

In angular, the Ng-controller directive will help us create a scope and inherit its father scope.

Parentctrl scope inherits from the $rootScope, Childctrl scope inherits from the parent scope.

function ($scope, $rootScope) {               = "Keatkeat";}); App.controller (function  ($scope) {  });

So even if we don't assign a value to name in Childctrl, the template can still read from Parentctrl to "Keatkeat".

Inheritance is very good and simple to read Father attribute values for child layers. But it's not so convenient to write!

Like what

function ($scope) {    = "Xinyao";});

When we fill in the sub-layer "Xinyao", you will find that the value is actually in the child layer template appears, and the Father template is still the original "Keatkeat"

Children can cover their fathers, which is perhaps what we want.

But that's also the case.

function ($scope, $rootScope) {               = {        "Keat",        "Keat"    }}); App.controller ( function ($scope) {    = "Xin";     = "Yao";                   });

Be especially careful when the father's value is an object. $scope. Name.first = "Xin"; Will change the father's value!

So for the prototype chain, the child has an "opportunity" to modify the father's value.

If you are not familiar with JS may not be able to understand, in fact, the principle is very simple

You can put $scope. Name.first = "Xin"; As such

var obj = $scope. Name; Read the Name property, which is not in the child layer, so it goes to the parent layer and finds an object

Obj.first = "Xin"; What you write is naturally the object of the parent layer, so it covers the father.

This is actually very good! It is also convenient for children to modify their father's value.

So is it possible that only objects can do that.

If it's just $scope. Name = "Keatkeat"; Wouldn't it be possible to modify the quilt layer?

Most of the situation! But there are exceptions!

Like what

function ($scope, $rootScope) {    var _name = "Keatkeat";    " Name ", {        functionreturn  _name},        function (newvalue) {_ Name = NewValue});    }); App.controller (function  ($scope) {    = "Xinyao";});

The name of the father is the property of the setter, Object.defineproperty is the new function of ECMA5.

In this case, the child will not be able to add its own name attribute, it will call the father's name directly to read and write!

Good use of the words are still good!

Summary: Angularjs scope is a simple JS object, inheritance is also a simple JS inheritance (prototype chain), so do not feel it is very mysterious, you have to understand it to play it out ^^

Angularjs Scope prototype Chain