Quick Contact


    AngularJS Scope Characteristics

    The various characteristics of the AngularJS scope are as follows:

    • Context is provided by the scope for expression. For example – We are displaying {{name}} in view part so it will be displayed as it is to a user until a value is attached to it and this work is done by scope. Scope provides value to property by $scope.name = “daisy”.
    • To observe model like a $watch, APIs are provided by scope.
    • Any model changes that is outside of “angular realm” can be propagated through the API provided by $scope.
    AngularJS Scope as Data Model

    AngularJS Scope is a link between the controller and view part. It is because values are attached with attributes through a scope in the controller part and it gets displayed in view part.

    angular.module(‘scopeApp’, [])

    .controller(‘ScopeController’, [‘$scope’, function($scope){

    $scope.tutorialname = ‘angularJs’;}]);

    Enroll Yourself in Live Classes For Online Summer Training.

    $WATCH

    A $watch is an expression that notifies about any change in the property. So that an updated value gets render to DOM.

    Scope Hierarchies

    Every AngularJs application can have only one root scope as it is the parent scope. But it can have more than one child scope. New scopes can be created by directives which are added to parent scope as child scope.

    This is how a hierarchical structure such as a tree of scope is created.

    How to Retrieve AngularJS Scope from the Directives

    As a $scope data property, scopes are attached with DOM elements. Location of ng-app directive defines the location where root scope is attached to DOM. Generally, we put ng-app in the root element but if we want to control a particular part of our application we can also provide ng-app directive for that particular part. But it is declared only once in an angular application.

    How to identify scope in a debugger
    • Select the element of your choice then right click on it you will get an option of ‘inspect element’ select it. You can now see a browser debugger along with a highlighted element that is the element selected by you for inspection.
    • The currently selected element can be accessed as $0 variable in a console, it is allowed by the debugger.
    • You have to execute angular.element($0).scope() to retrieve the associated scope in a console.

    To make the scope function available $compileProvider.debugInfoEnabled() should be set true. And it is already set as a true value by default.

    Scope Event Propagation

    Like the DOM elements, AngularJS events can be propagated by scope too. Events can either be broadcasted to the child scope or emitted to the parent scope

    • $EMIT

      It is a function used to propagate events. $EMIT propagates its upper side of the hierarchy of scope. It means if the event is in child scope it will get propagates at upwards means in the parent scope.

    • $BROADCAST

      It is a function used to propagate events. $BROADCAST propagates it down the side of the hierarchy of scope. It means if the event is in child scope it will get propagates at downwards means in the second child scope.

    AngularJS Scope Inheritance

    Scope is basically controller specific. Whenever we nest a controller, that means to declare a controller inside a controller then the child controller inherits the scope of the parent controller.

    AngularJS Scope Characteristics
    	
    	< html>
    	< head>
    	< title>Angular JS Forms< /title>
    	< /head>
    	< body>
    	< div ng-app = "employeeApp" ng-controller = "employeeOne">
    	< p>{{name}} < br/> {{salary}} < /p>
    	< div ng-controller = "employeeTwo">
    	< p>{{name}} < br/> {{salary}} < /p>
    	< /div>
    	< div ng-controller = "employeeThree">
    	< p>{{name}} < br/> {{salary}} < /p>
    	< /div>
    	< /div>
    	< script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
    	< /script>
    	< script>
    	var t = angular.module("employeeApp", []);
    	t.controller("employeeOne", function($scope) {
    	$scope.name = "Ajay";
    	$scope.salary = "25000";
    	});
    	t.controller("employeeTwo", function($scope) {
    	$scope.name = "Raj";
    	});
    	t.controller("employeeThree", function($scope) {
    	$scope.name = "Navi";
    	$scope.salary = "30000";
    	});
    	< /script>
    	< /body>
    	< /html>
    	
    Output:

    Ajay

    25000

    Raj

    25000

    Navi

    30000

    Enroll Yourself in Live Classes For Angular Training Online.

    Copyright 1999- Ducat Creative, All rights reserved.