AngularJS Scope (scope)

Last Update:2016-07-06 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Scope (scope) is the link between HTML (view) and JavaScript (controller).Scope is an object that has methods and properties Available. Scope can be applied to views and Controllers.How to use ScopeWhen you create a controller in AngularJS, you can pass $scope object as a parameter :The properties in the controller correspond to the properties on the View:<pre><!DOCTYPE HTML><HTML><Head><MetaCharSet= "utf-8"><Scriptsrc= "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></Script></Head><Body><DivNg-app= "myApp"Ng-controller= "myctrl"><H1>{{carname}}</H1></Div><Script>varapp=Angular.module ('myApp', []); App.controller ('Myctrl', function($scope) {$scope. carname= "Volvo";});</Script><P>The controller creates a property name of "carname" that corresponds to the name in the view that is used in the {{}}.</P></Body></HTML></pre>Views (HTML) can obtain these properties when $scope objects are added to the Controller.view, you do not need to add a $scope prefix, Just add a property name , such as: {{carname}}.Scope OverviewThe AngularJS application consists of the Following: <ul> <ul> <li>view, which is HTML.</li> <li>Model (models), the data available in the current VIEW.</li> <li>controller, the JavaScript function, can add or modify Properties.</li> </ul> </ul>Scope is a model.Scope is a JavaScript object with properties and methods that can be used in views and controllers.If you modify the view, the model and controller are updated accordingly:<pre><!DOCTYPE HTML><HTML><Head><MetaCharSet= "utf-8"><Scriptsrc= "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></Script></Head><Body><DivNg-app= "myApp"Ng-controller= "myctrl"><inputNg-model= "name"><H1>My name is {{name}}</H1></Div><Script>varapp=Angular.module ('myApp', []); App.controller ('Myctrl', function($scope) {$scope. name= "John Doe";});</Script><P>When you modify the value in the input box, it affects the model and, of course, the property values that the controller corresponds to.</P></Body></HTML></pre>Scope scopeIt is important to understand the scope you are currently using.In the above two instances, there is only one scope scope, so it is relatively simple to handle, but in a large project, there are multiple scopes in the HTML DOM, you need to know which scope corresponds to what scope you are Using.When we use the ng-repeat directive, Each duplicate item accesses the current duplicate object:<pre><!DOCTYPE HTML><HTML><Head><MetaCharSet= "utf-8"><Scriptsrc= "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></Script></Head><Body><DivNg-app= "myApp"Ng-controller= "myctrl"><ul> <Ling-repeat= "x in names">{{x}}</Li></ul></Div><Script>varapp=Angular.module ('myApp', []); App.controller ('Myctrl', function($scope) {$scope. Names= ["Emil", "Tobias", "Linus"];});</Script> </Body></HTML></pre>Each <li> element can access the current duplicate object, which corresponds to a string and is represented by the variable x .Root scopeAll applications have a $rootScopethat can function in all of the HTML elements contained in the Ng-app Directive.$rootScope can act on the entire Application. is the bridge of scope in each controller. Values defined with Rootscope can be used in each controller.When you create a controller, you pass the $rootScope as a parameter, which you can use in your app:<pre><!DOCTYPE HTML><HTML><Head><MetaCharSet= "utf-8"><Scriptsrc= "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></Script></Head><Body><DivNg-app= "myApp"Ng-controller= "myctrl"><H1>Family member with last name {{lastname}}}:</H1><ul> <Ling-repeat= "x in names">{{x}} {{lastname}}</Li></ul></Div><Script>varapp=Angular.module ('myApp', []); App.controller ('Myctrl', function($scope, $rootScope) {$scope. names= ["Emil", "Tobias", "Linus"]; $ROOTSCOPE. LastName= "Refsnes";});</Script><P>Note $rootScope can be accessed both inside and outside the loop object.</P></Body></HTML></pre>AngularJS Scope (scope)

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

AngularJS Scope (scope)

Contact Us

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support