Scope is the link between HTML (view) and JavaScript (controller).
Scope is an object with available methods and properties.
Scope can be applied to views and controllers.
$rootScope
By default, every AngularJs application has a root scope --$rootScope, which is located at the top level and can be used as the parent scope of other scopes.
$scope
Scope corresponds to the Model of MVC pattern, which is the link between HTML (view) and JavaScript (controller), and can be applied to both views and controllers.
Scope is the context of expression execution, and the scope is also an object with available methods and properties.
First, the value and assignment of variables
< p ng-controller="parentCtrl">
< span> {{number}}< /span>
< p ng-controller="childCtrl">
< span> {{number}}< /span>
< button ng-click="number = number + 1"> Add <; /button>
< /p>
< /p>
function parentCtrl($scope){
$scope.number = 1;
}
function childCtrl($scope){
} effect:
There are two 1 on the interface, but when we click the button, the data in the scope of childCtrl changes, while the data in the scope of parentCtrl does not.
Analysis:
①childCtrl scope inherits parentCtrl scope (similar to the prototype chain inheritance of JavaScript), so childCtrl scope can access the contents of parentCtrl.
② After clicking the button, the scope of childCtrl will create a number basic type variable, and when childCtrl has a basic type variable, it will not access the prototype chain.
Solve:
① You can use $parent to specify the change of parent scope.
< p ng-controller="parentCtrl">
< span> {{number}}< /span>
< p ng-controller="childCtrl">
< span> {{number}}< /span>
< button ng-click="$parent.number = number + 1"> Add <; /button>
< /p>
< /p> (2) Using reference type variables, the inner and outer scopes are references to data objects, and modifying the properties of the objects still refers to the same variable.
< p ng-controller="parentCtrl">
< span> {{data.number}}< /span>
< p ng-controller="childCtrl">
< span> {{data.number}}< /span>
< button ng-click="data.number = data.number + 1"> Add <; /button>
< /p>
< /p>
function parentCtrl($scope){
$scope.data.number = 123';
}
function childCtrl($scope){
} instructions such as ng-if, ng-repeat, ng-switch and ng-include will also generate new scopes.
Second, the scope in Directive
.directive("myDirective", function () {
return {
restrict: "AE",
scope: {
name: '@myName',
age: '=',
changeAge: '& changeMyAge'
},
replace: true,
template: "< p class='my-directive'>" +
"My name is: <; span ng-bind='name'> < /span> < br/>" +
"My age is: <; span ng-bind='age'> < /span> < br/>" +
"Modify the name here: <; input type='text' ng-model='name'> < br/>" +
"< button ng-click='changeAge()'> Modify age <; /button>" +
" < /p>"
}①scope：false
When scope is set to false, the instruction we created and the parent scope (actually the same scope) * * * share the same model, so if we modify the model data in the instruction, it will be reflected in the model of the parent scope.
②scope：true
When scope is set to true, we create a new scope, but this scope is the inherited parent scope; It can be understood that our newly created scope is a new scope, but at the time of initialization, we used the properties and methods of the parent scope to fill our new scope. It is not the same scope as the parent scope.
③scope：{}
@ This is a prefix identifier for a single binding.
< p my-directive my-name="{{name}}"> < /p> The name of the attribute should be-to connect the two words, because it is a single binding of data, so the data should be bound by using {{}}.
= This is a bidirectional data binding prefix identifier.
< p my-directive age="age"> < /p> The two-way binding of data should be realized by = prefix identifier, so {{}} cannot be used.
& This is the prefix identifier of a binding function method.
< p my-directive change-my-age="changeAge()"> < /p> The name of the attribute should be-to connect multiple words.
I compiled the above for everyone, and I hope it will be helpful to everyone in the future.
Related articles:
How to realize menu permission control with react
Explain in detail how props passes parameters in vue.js
How to Realize Dynamic Fuzzy Query in input