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.

However, if you don’t mind the trouble, you can use

$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

controllers , what does that have to do with the issue mentioned earlier? Doesn’t it look like there is only one Controller?

In fact, not only the Controller can create a scope, instructions such as

ng-if will also (implicitly) generate new scopes.

To summarize,

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.

Therefore, in the development process, in order to avoid variable ambiguity in the template, naming qualifications should be used as much as possible, such as

data.x, the possibility of ambiguity is higher than that of a separate x is much less.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

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!