CODEWITHSUNDEEP
javascriptangularjsroutes
hEShaN
hEShaN

Reputation: 581

$scopes in angular js

I am a beginner to angular. I went through angular routing tutorial and i am in doubt with the following code where it seems like $scope of one controller is accessed by another. As i know we cant access $scope's data of one controller couldnt be accessed by another. Could some one explain this scenario? and the code works fine here.

<html lang="en" ng-app="myApp">

<body>
<div ng-controller="directoryController">
    <div ng-view>

    </div>
</div>

</body>
<script src="angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
<script>
    var app = angular.module("myApp", ['ngRoute']);
    app.config(function ($routeProvider) {
        $routeProvider
                .when('/', {templateUrl: 'directory.html'})
                .when('/view/:id', {templateUrl: 'view.html', controller: 'viewController'})
                .otherwise({redirectTo: '#'})
    });
    app.controller('directoryController', ['$scope', function ($scope) {
        //i have defined an array called data here suppose its there
        $scope.people = data;

    }]);
    app.controller('viewController', ['$scope', '$routeParams', function ($scope, $routeParams) {
        $scope.person = $scope.people[$routeParams.id]
    }]);
</script>

</html>

Upvotes: 2

Views: 69

Answers (2)

georgeawg
georgeawg

Reputation: 48948

Scopes prototypically inherent from parent scopes.

Executive Summary:

In AngularJS, a child scope normally prototypically inherits from its parent scope. One exception to this rule is a directive that uses scope: { ... } -- this creates an "isolate" scope that does not prototypically inherit.（and directive with transclusion） This construct is often used when creating a "reusable component" directive. In directives, the parent scope is used directly by default, which means that whatever you change in your directive that comes from the parent scope will also change in the parent scope. If you set scope:true (instead of scope: { ... }), then prototypical inheritance will be used for that directive.

-- AngularJS Wiki -- Understanding Scopes

Scope Hierarchies

Each Angular application has exactly one root scope, but may have several child scopes.

The application can have multiple scopes, because some directives create new child scopes (refer to directive documentation to see which directives create new scopes). When new scopes are created, they are added as children of their parent scope. This creates a tree structure which parallels the DOM where they're attached.

When Angular evaluates {{name}}, it first looks at the scope associated with the given element for the name property. If no such property is found, it searches the parent scope and so on until the root scope is reached. In JavaScript this behavior is known as prototypical inheritance, and child scopes prototypically inherit from their parents.

-- AngularJS Developer Guide -- Scope Hierarchies

Upvotes: 0

Martijn Welker
Martijn Welker

Reputation: 5605

Angular $scopes are like a tree, the trunk is the $rootScope and every other $scope branches from that or another $scope, so since your viewController is a child of directoryController you can access the variables in it.

$rootScope -> directoryController -> viewController

The viewController can access all the parent $scopes, the directoryController can access $rootScope and the $rootScope can only access itself.

Upvotes: 3

Related Questions