AngularJS Scope (scope).

This section gives you an idea of what is How Angular JS Scope (scope) and Scope should be used in Angular JS.

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 Scope

When you create a controller at AngularJS, you can pass $scope object as a parameter:

AngularJS instance

The properties in the controller correspond to the properties on the view:

< 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 out . . .

Views (HTML) can $scope properties when you add an object to the controller.

In the view, you don't $scope to add a prefix, you just need to add a property name, such as: .

Scope overview

The AngularJS application consists of the following:

  • View, or HTML.
  • Model, the data available in the current view.
  • Controller, the JavaScript function, can add or modify properties.

scope is a model.

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

AngularJS instance

If you modify the view, the model and controller are updated accordingly:

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

< input ng-model= "name" >

< My name is >

< /div >

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

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

Try it out . . .

Scope scope of action

It is important to understand the scope you are currently using.

In both instances, there is only one scope scope, so it's easier to handle, but in large projects, HTML DOM has multiple scopes, so you need to know which scope you're using.

AngularJS instance

When we use the ng-repeat instruction, each duplicate accesses 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 out . . .

Each element can access the current duplicate object, which corresponds to a string and is represented by the variable x.

The root scope

All apps have a $rootScope that can work in all HTML elements contained in the ng-app directive.

$rootScope can be applied throughout the application. i s the bridge between the scopes in each controller. Values defined with rootscope can be used in individual controllers.

AngularJS instance

When you create a controller, $rootScope as a parameter and can be used in your app: 

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

<h1>{{lastname}} 家族成员:</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 out . . .