Latest web development tutorials

AngularJS Scope (Scope)

Scope (scope) is used in the link HTML (View) and JavaScript (controller) between.

Scope is an object, methods and properties are available.

Scope can be used in the view and controller.

How to use Scope

When you create controller AngularJS, you can$ scope object as an argument:

AngularJS examples

Controller attributes corresponding to the attributes view on:

<Div ng-app = "myApp " ng-controller = "myCtrl">

<H1> {{carname}} </ h1>

</ Div>

<Script>
var app = angular.module ( 'myApp' , []);

app.controller ( 'myCtrl', function ( $ scope) {
$ scope.carname = "Volvo";
});
</ Script>

try it"

When adding$ scope objects in the controller, the view (HTML) can get these properties.

View, you do not need to add$ scope prefix, you only need to add an attribute name, such as:{{carname}}.

Scope Overview

AngularJS application consists of the following:

  • View (view), that is HTML.
  • Model (model), the current view of the data available.
  • Controller (Controller), the JavaScript function, you can add or modify properties.

scope the model.

scope is a JavaScript object properties and methods with these attributes and methods can be used in views and controllers.

AngularJS examples

If you change the view, model and controller will be updated:

<Div ng-app = "myApp " ng-controller = "myCtrl">

<Input ng-model = "name ">

<H1> My name is {{name}} </ h1 >

</ Div>

<Script>
var app = angular.module ( 'myApp' , []);

app.controller ( 'myCtrl', function ( $ scope) {
$ scope.name = "John Dow";
});
</ Script>

try it"

Scope scope

Understand the scope you are currently using is very important.

In both instances, there is only one scope scope, so the process is relatively simple, but in large projects, HTML DOM has multiple scopes, then you need to know the scope of the corresponding scope is what you use One.

AngularJS examples

When we useng-repeat command, have visited each duplicate of the current duplicate object:

<Div ng-app = "myApp " ng-controller = "myCtrl">

<Ul>
<Li ng-repeat = "x in names"> {{x}} </ li>
</ Ul>

</ Div>

<Script>
var app = angular.module ( 'myApp' , []);

app.controller ( 'myCtrl', function ( $ scope) {
$ scope.names = [ "Emil", "Tobias", "Linus"];
});
</ Script>

try it"

Each<li> element can access the current duplicate objects, here is a corresponding string, and variable xindicates.

Root scope

All applications have a$ rootScope, it is applied to all HTML elements ng-appdirective contains.

$ rootScope can act on the entire application.Each controller is in the scope of the bridge. Rootscope with the value defined in each controller can be used in.

AngularJS examples

When you create a controller to $ rootScope passed as a parameter can be used in the application:

<Div ng-app = "myApp " ng-controller = "myCtrl">

<H1> {{lastname}} Family members: </ h1>

<Ul>
<Li ng-repeat = "x in names"> {{x}} {{lastname}} </ li>
</ Ul>

</ Div>

<Script>
var app = angular.module ( 'myApp' , []);

app.controller ( 'myCtrl', function ( $ scope, $ rootScope) {
$ scope.names = [ "Emil", "Tobias", "Linus"];
$ rootScope.lastname = "Refsnes";
});
</ Script>

try it"