Home > Web Front-end > JS Tutorial > body text

A brief discussion on angularJS scope_AngularJS

WBOY
Release: 2016-05-16 15:51:20
Original
1031 people have browsed it
<!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>

Copy after login

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.

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template