Inheritance controllers with AngularJS

Question

I have my front part of the application in AngularJs with JSP files.

The index.jsp use the directive ng-view to show the views :

index.jsp

<div ng-view autoscroll="true" style="overflow: auto;"></div>

and the app.js to link with $routeProvider the controller to the view (home.jsp do some includes of views.jsp) :

app.js

$routeProvider
.when('/Error', {
    controller: 'LoginController',
    templateUrl: 'modules/authentication/views/errorConnexion.jsp',
    hideMenus: true
})
.when('/', {
    controller: 'HomeController',
    templateUrl: 'modules/home/views/home.jsp'
})
.otherwise({ redirectTo: '/login' });

and my HomeController uses fields to hide or show some DOM elements :

HomeController.js

app.controller('HomeController',
                ['$timeout',
                'service',
                '$scope',
                '$rootScope',
                '$filter',
                '$location',
                '$window',
                'ModalService',
                'ngTableParams',
                '$http',
                '$interval',
                'Excel',
                function($timeout, service, $scope,
                        $rootScope, $filter, $location, $window,
                        ModalService, ngTableParams, $http, $interval, Excel) {

    $scope.Hide_Module = true;
})]);

My controller child :

ChildController.js

app
.controller('ChildController',
    function() {        
        $scope.field = "random";            
    }
);

And finally the problem, the view :

view.jsp

<section ng-controller="ChildController" class="content"
         ng-hide="Hide_Module">

The problem is : If I remove ng-controller directive on the section tag, all is alright. But if I add it, the main view (index.jsp) shows view.jsp......

So I want to know what I did wrong and moreover how angularjs deals with controllers inheritance and how they are binded through the views ?

Controllers instantiated by both the `ng-view` directive and `ng-controller` directive inherit scope properties from parent scopes. — georgeawg, Mar 12 '20 at 17:43

score 0 · Answer 1 · answered Mar 12 '20 at 17:42

0

Find out by myself, here two errors in my project :

Link to the controller file missing

<script src="modules/controllers/sub/childController.js"></script>

(Added in the index.jsp)

Data shared through $scope variable only in Object syntax

Define $scope.myObject = { key: value, ... } in the parent controller instead of primitives and arrays. Add the $scope argument in the child controller as :

app.controller('ChildController', ['$scope', function($scope) { } ]);

answered Mar 12 '20 at 17:42

mtnp

314
7
24

1

That is not entirely true. Child scopes inherit primitives as well as objects. One should execise caution when making *assignments* to primitives. Assignments to primitives can cause data hiding problems. – georgeawg Mar 12 '20 at 17:48

Inheritance controllers with AngularJS

1 Answers1