My Controller Inheritance in AngularJS doesn't work when I use alias

Question

I was trying to learn controller inheritance in angularJS.

Please follow the code below

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <title>Recipe 02 example 01</title>
    <script type="text/javascript" src="D:\Rahul Shivsharan\JavaScript-Framework\AngularJS\angular.js"></script>
    <script type="text/javascript" src="D:\Rahul Shivsharan\JavaScript-Framework\jQuery\jquery-1.11.1.js"></script>
    <link rel="stylesheet" href="D:\Rahul Shivsharan\JavaScript-Framework\BootstrapCSS\bootstrap-3.2.0-dist\css\bootstrap.css"></link>
    <script type="text/javaScript">
        angular.module("myApp",[]);

        (function(){
            angular.module("myApp").controller("ParentCtrl",ParentCtrl);
            angular.module("myApp").controller("ChildCtrl",ChildCtrl);

            function ParentCtrl($scope){
                $scope.lastName = "Bond"
            };

            function ChildCtrl($scope){
                $scope.firstName = "James"
            };
        })();
    </script>
</head>
<body>
    <div ng-controller="ParentCtrl">
        <div ng-controller="ChildCtrl">
            <h3>Full name is {{firstName + " "+ lastName}}</h3>
        </div>
    </div>
</body>

The above code prints the output

Full name is James Bond

But

If I give the alias name to the controllers, it doesn't work, as seen in below code

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <title>Recipe 02 example 01</title>
    <script type="text/javascript" src="D:\Rahul Shivsharan\JavaScript-Framework\AngularJS\angular.js"></script>
    <script type="text/javascript" src="D:\Rahul Shivsharan\JavaScript-Framework\jQuery\jquery-1.11.1.js"></script>
    <link rel="stylesheet" href="D:\Rahul Shivsharan\JavaScript-Framework\BootstrapCSS\bootstrap-3.2.0-dist\css\bootstrap.css"></link>
    <script type="text/javaScript">
        angular.module("myApp",[]);

        (function(){
            angular.module("myApp").controller("ParentCtrl",ParentCtrl);
            angular.module("myApp").controller("ChildCtrl",ChildCtrl);

            function ParentCtrl(){
                var obj = this;
                obj.lastName= "Bond"
            };

            function ChildCtrl(){
                var obj = this;
                obj.firstName = "James"
            };
        })();
    </script>
</head>
<body>
    <div ng-controller="ParentCtrl as p">
        <div ng-controller="ChildCtrl as c">
            <h3>Full name is {{c.firstName + " "+ c.lastName}}</h3>
        </div>
    </div>
</body>

The output is

Full name is James

What I assumed was there is a prototype chaining from ChildCtrl to ParentCtrl. something like

ChildCtrl.prototype = new ParentCtrl();
var c = new ChildCtrl();
console.log(" Full name is "+c.firstName+" "+c.lastName)

Is it not so ?

Please explain me or give me some pointers.

I am just asking. Is the angularJS controller's inheritance work same as prototype inheritance in plain javaScript ? — Rahul Shivsharan, Aug 04 '15 at 05:57
There's no controller inheritance. Certainly not when you simply nest them. — Sergio Tulentsev, Aug 04 '15 at 05:58
Inheritance of *scope*, however, is another matter. But controllers - no. — Sergio Tulentsev, Aug 04 '15 at 05:59
so, does my first example is 'Inheritance of scope' as property 'lastName' is present in ParentCtrl but still seen in div of ChildCtrl. So is this scope inheritance ? — Rahul Shivsharan, Aug 04 '15 at 06:12

score 0 · Accepted Answer · answered Aug 04 '15 at 06:13

0

Difference between the two snippets is not just giving names to controllers. In your first example you set properties on $scope.

    function ParentCtrl($scope){
        $scope.lastName = "Bond"
    };

    function ChildCtrl($scope){
        $scope.firstName = "James"
    };

Whereas in the second snippet you set properties on controllers themselves.

    function ParentCtrl(){
        var obj = this;
        obj.lastName= "Bond"
    };

    function ChildCtrl(){
        var obj = this;
        obj.firstName = "James"
    };

Nested scopes do inherit prototypically. Nested controllers - do not. So, change your second snippet to use $scope too and it'll work. Or use correct controller when referencing a property (p.lastName).

Things to read: https://github.com/angular/angular.js/wiki/Understanding-Scopes

answered Aug 04 '15 at 06:13

Sergio Tulentsev

226,338
43
373
367

Earlier I also used to think that controllers do inheritance between them. @sergio can you explain bit more on $scope and this in controller..?? – Shubham Nigam Aug 04 '15 at 06:28
@ShubhamNigam: not sure what you want to know exactly? Have you read the link I posted? – Sergio Tulentsev Aug 04 '15 at 06:29
Yes I gone through the whole aritcle ..well written article.. I wanted to know app.controller('myCtrl',function($scope){$scope.a='Hello';}) and app.controller('myCtrl',function(){this.a='Hello'}).. difference between these two – Shubham Nigam Aug 04 '15 at 06:40

score 0 · Answer 2 · answered Aug 04 '15 at 09:40

Thanks for guiding me. Now I understood the $scope inheritance, I have written the code which explains properly

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <title>Recipe 02 example 01</title>
    <script type="text/javascript" src="D:\Rahul Shivsharan\JavaScript-Framework\AngularJS\angular.js"></script>
    <script type="text/javascript" src="D:\Rahul Shivsharan\JavaScript-Framework\jQuery\jquery-1.11.1.js"></script>
    <link rel="stylesheet" href="D:\Rahul Shivsharan\JavaScript-Framework\BootstrapCSS\bootstrap-3.2.0-dist\css\bootstrap.css"></link>
    <script type="text/javaScript">
        angular.module("myApp",[]);

        (function(){
            angular.module("myApp").controller("ParentCtrl",ParentCtrl);
            angular.module("myApp").controller("ChildCtrl",ChildCtrl);

            function ParentCtrl($scope){
                $scope.obj = new Object();
                $scope.obj.lastName = "Bond";
            };

            function ChildCtrl($scope){
                //$scope.obj = new Object();
                if("obj" in $scope){
                    $scope.obj.firstName = "James";
                }else{
                    $scope.obj = new Object();
                    $scope.obj.firstName = "Johny";
                }

            };
        })();
    </script>
</head>
<body>
    <div ng-controller="ParentCtrl">
        <div ng-controller="ChildCtrl">
            <h4>Full name is {{obj.firstName + " "+ obj.lastName}}</h4>
        </div>
    </div>
    <div ng-controller="ChildCtrl">
        <h3>New : {{obj.firstName}}</h3>
    </div>
</body>

the output is as follows

   Full name is James Bond

   New : Johny

Thanks.....

My Controller Inheritance in AngularJS doesn't work when I use alias

2 Answers2