Home >Web Front-end >JS Tutorial >How to use AngularJS scopes
This time I will show you how to use AngularJS scope, what are the precautions when using AngularJS scope, the following is a practical case, let's take a look.
Problem Introduction
After using Angular for a period of development, you will basically encounter a pit like this:
<p ng-controller="TestCtrl"> <p>{{name}}</p> <p ng-if="show"> <input type="text" ng-model="name"> </p> </p> <script> function TestCtrl($scope){ $scope.show = true; $scope.name = 'htf'; } </script>
Bind the p
element and the input
element to the same variable. You would have thought that when you enter content in the input box, the content displayed in p
will definitely be random. of change.
However, this is not the case. No matter how the elements in input
change, the elements in p
do not change, WTF.
If we want to talk about the reason for this, we have to start with the scope of Angular.
Scope
Each Angular application has a root scope $rootScope by default. The root scope is at the top level and goes down from it. Hanging scopes at all levels.
Normally, the variables bound to ng-model
in the page are defined in the corresponding Controller. If a variable is not defined in the current scope, JavaScript will look up through the prototype of the current Controller, which is scope inheritance.
This is divided into two situations.
1. Basic type variables
<p ng-controller="OuterCtrl"> <p>{{x}}</p> <p ng-controller="InnerCtrl"> <input type="text" ng-model="x"> </p> </p> <script> function OuterCtrl($scope){ $scope.x = 'hello'; } function InnerCtrl($scope){ } </script>
After running, you will find the same problem as at the beginning of the article. The input box inside has changed, but the outside one has not changed.
The reason is that the variable x
is not defined in InnerCtrl
. When getting the value, it will look up along the prototype chain and find OuterCtrl
##x defined in #, and then assign it to itself. When entering a value in the input box of
InnerCtrl, what changes is
x in
InnerCtrl, It has no effect on
x in
OuterCtrl. At this time, the two
x are independent.
$scope.$parent to bind and affect the basic variables in the upper scope:
<input type="text" ng-model="$parent.x">
2. Reference type variables
So, what if the upper-level and lower-level scopes want to share variables? The answer is to use reference type variables.<p ng-controller="OuterCtrl"> <p>{{x}}</p> <p ng-controller="InnerCtrl"> <input type="text" ng-model="x"> </p> </p> <script> function OuterCtrl($scope){ $scope.data = {}; $scope.data.x = 'hello'; } function InnerCtrl($scope){ } </script>In this case, the
data of the two are the same reference, and modifications to the properties of this object can be reflected to the two-level objects.
Scope in ng-if
What we talked about earlier is the scope between two levels of In fact, not only the Controller can create a scope, instructions such asng-if will also (implicitly) generate new scopes.
ng-if,
ng-switch,
ng-include<a href="http://www.php.cn/wiki/137.html" target="_blank"></a>, etc. will dynamically create a block Everything in the interface has its own first-level scope.
data.x, the possibility of ambiguity is higher than that of a separate
x is much less.
How to use Koa2 to develop WeChat QR code scanning payment
How to use AngularJS to implement tab pages tab switching
The above is the detailed content of How to use AngularJS scopes. For more information, please follow other related articles on the PHP Chinese website!