Ng-controller value replication and reference replication in Angular JS

We know that when using Ng-app or Ng-controller directives, a new scope ($rootScope or $scope) is created, and scopes created with the Ng-controller directive inherit the parent scope ($ Rootscope or $scope) all methods and properties.

But the attributes inherited here have some knowledge.

Run the following code:

Html

<DivNg-controller= "Somecontroller">{{Somebarevalue}}<ButtonNg-click= "someaction ()">parent Button</Button> 　　 <DivNg-controller= "Childcontroller">{{Somebarevalue}}<ButtonNg-click= "childaction ()">child Button</Button> 　　 </Div></Div>

Js

Angular.module (' myApp ', []). Controller (function($scope) { $scope. somebarevalue = ' Hello C '　　　　Omputer ';　　　　 function() { $scope. somebarevalue = ' Hello Human, from parent ';　　}; }). controller (functionfunction() { $scope. somebarevalue = ' Hello human,　　　　From child ';　　}; });

Parent-Child scopes display the same value after initial loading

When you click on the parent button, you can see that the parent-child scope changes simultaneously

Then when you click on the Child button, the value of the sub-scope is updated

Then when I click on the parent button again, I find that the parental scope is updated, but the child scope is not changing.

This is because the inheritance between parent-child scopes is achieved by a string number or Boolean value , which is the value of JS copy .

Then run the following code:

Html

<div ng-controller= "Somecontroller" > {{somemodel.somevalue}} <button ng-click= "someaction ()" > Parent button</button> <div ng-controller= "Childcontroller" > {{somemodel.somevalue}} <but Ton ng-click= "Childaction ()" >child button</button> </div></div>

Js

Angular.module (' myApp ', []). Controller (function($scope) { $scope. Somemodel ='　　　　Hello computer 'function= ' Hello Human, from parent ';　　};　　　　}). controller (functionfunction= ' Hello Human, from child ';　　}; });

You can see that the difference between this example and the example above is that the child scope inherits from the parent scope, which is implemented by an object Somemodel, and runs the example.

After the initial completion, the parent-child scope displays the same string.

The parent button or child button then displays the same string synchronously, regardless of whether they are clicked.

This is because the inheritance between parent-child scopes is implemented by an object , which is the reference copy of JS .

In addition, in addition to Ng-controller

Ng-include

Ng-switch

Ng-repeat

Ng-view

Ng-if

All have the same characteristics.

Ng-controller value replication and reference replication in Angular JS