| |
What is the scope. What is the controller, the scope includes the functions and data required for rendering a view, it is the only source of all views. Scopes can be understood as attempts to model (ViewModel). The scope can be contained between the relationship can be a standalone relationship by setting different ng-Controller to make $ scope in different scopes below.
I. $ rootScope
1.1 rootScope can be understood as a global variable, once the assignment is valid for the entire module. RootScpoe does not depend on any one controller, app.run the code is executed when the module is loaded it can be understood as Silverlight MVVM inside oninit methods.
< Html>
< Script src = "angular.min.js"> < / script>
< Script type = "text / javascript">
var app = angular.module ( 'myapp', []);
app.run (function ($ rootScope) {
$ RootScope.message = "hello frank!";
});
< / Script>
< Head>
< Div ng-app = "myapp">
< H1> {{message}} < / h1>
< / Div>
< / Head>
< Body>
< / Body>
< / Html>
1.2 AngularJS will give priority to get the value of the Controller $ scope to add.
Code is as follows: There are three {message} testControl2 at $ scope given the message to re-value.
< Html>
< Script src = "angular.min.js"> < / script>
< Script type = "text / javascript">
var app = angular.module ( 'myapp', []);
app.run (function ($ rootScope) {
$ RootScope.message = "hello frank!";
});
app.controller ( 'testControl1', function () {
});
app.controller ( 'testControl2', function ($ scope) {
$ Scope.message = "hello loch!";
});
< / Script>
< Head>
< Div ng-app = "myapp">
{{Message}}
< Div ng-controller = "testControl1">
{{Message}}
< / Div>
< Div ng-controller = "testControl2">
{{Message}}
< / Div>
< / Div>
< / Head>
< Body>
< / Body>
< / Html>
Run Results: testControl2 under the message is modified.
hello frank!
hello frank!
hello loch!
II. The controller (ng-Controller)
ng-Controller atmosphere containing both cases one is, the other is independent. Let us called the father and son relationship and sibling relationship it.
2.1 paternity
2.1.1 code is as follows: ChildController contained in ParentController inside, two button are on the Count field assignment.
< Html>
< Script src = "angular.min.js"> < / script>
< Script type = "text / javascript">
var app = angular.module ( 'myapp', []);
app.controller ( 'ParentController', function ($ scope) {
$ Scope.Count = 1;
$ Scope.addParent = function () {
$ Scope.Count + = 1;
}
});
app.controller ( 'ChildController', function ($ scope) {
// $ Scope.Count = 1;
$ Scope.addChild = function () {
$ Scope.Count + = 1;
}
});
< / Script>
< Head>
< Div ng-app = "myapp">
< Div ng-controller = "ParentController">
< Span> {{Count}} < / span>
< Button ng-click = "addParent ()"> ParentClick < / button>
< Div ng-controller = "ChildController">
< Span> {{Count}} < / span>
< Button ng-click = "addChild ()"> ChildClick < / button>
< / Div>
< / Div>
< / Div>
< / Head>
< Body>
< / Body>
< / Html>
2.1.2 :( operating results in the above demo, there are a bunch of commented-out code)
A code is Note: When a start clicking ParentClick increase when Count two together, and then click ChildClick ChildDiv only when the Count is increasing, then go back and click ParentClick time, only in self-energizing ParentCount
B. codes have not been annotated: between the self-energizing are separate and distinct and complementary association.
2.1.3 Summary:
Because AngularJS will go first to the default value under the current Controller, then go find the parent Controller value, if it can not find value rootScope went, for Class A case did not click ChildClick time, ChildController also Count value is not set, then the corresponding Count only takes a value scope.count of ParentController go inside. when you click ChildClick after, ChildController of $ scope.count is created, then two independent Controller begins.
2.2 fraternal relations.
The result: two Controller under Count independent, self-energizing each other.
< Html>
< Script src = "angular.min.js"> < / script>
< Script type = "text / javascript">
var app = angular.module ( 'myapp', []);
app.controller ( 'BrotherOne', function ($ scope) {
$ Scope.Count = 1;
$ Scope.addParent = function () {
$ Scope.Count + = 1;
}
});
app.controller ( 'BrotherTwo', function ($ scope) {
$ Scope.Count = 1;
$ Scope.addChild = function () {
$ Scope.Count + = 1;
}
});
< / Script>
< Head>
< Div ng-app = "myapp">
< Div ng-controller = "BrotherOne">
< Span> {{Count}} < / span>
< Button ng-click = "addParent ()"> ParentClick < / button>
< / Div>
< Div ng-controller = "BrotherTwo">
< Span> {{Count}} < / span>
< Button ng-click = "addChild ()"> ChildClick < / button>
< / Div>
< / Div>
< / Head>
< Body>
< / Body>
< / Html>
III. Benpian summary
A. $ rootScope == Global Variables
B. variable bindings default start to fetch $ scope of the current Controller |
|
|
|