Home > Article > Web Front-end > A brief discussion on angularJS scope_AngularJS
<!doctype html> <html ng-app="firstApp"> <head> <meta charset="utf-8"> <script src="angular-1.3.0.js"></script> </head> <body> <div ng-controller="parentCtrl"> <input ng-model="args"> <div ng-controller="childCtrl"> <input ng-model="args"> </div> </div> <script> var app=angular.module('firstApp',[]); app.controller('parentCtrl',function($scope) { $scope.args = '123'; }).controller('childCtrl', function($scope) { }); </script>
Case description:
Although no specific args attribute is defined in childCtrl, because the scope of childCtrl inherits from the scope of parentCtrl,
Therefore, childCtrl is linked to the parent scope args property through the prototype and is set to the input. And the input value in the parent input is automatically synchronized to the child input
But the reverse is not true. That is, modifications in the child cannot change the value in the parent, and the child is also out of sync after the parent is modified. The reason: when inputting content in the child scope,
Because the model in the HTML code is explicitly bound to the scope of childCtrl, AngularJS will generate an args primitive type attribute for childCtrl.
According to the AngularJS scope inheritance prototype mechanism, childCtrl finds the args attribute value in its own scope, so it does not look for the args value from the parent.
As a result, the child scope has args and the parent scope has args, and the values between the child and the parent will no longer be synchronized.
The above is the entire content of this article, I hope you all like it.