Losing scope between angular modules using ng-view

Question

I seem to be losing scope on my angular controller when I am trying to abstract my Angularjs modules.

It works fine if i use my app module, but as soon as I change the home.js module to app.layout, $scope no longer works.

Can anybody spot an issue here?

_Layout.html (left out includes and head)

<body class="docs-body" ng-app="app">
<div layout="column" ng-cloak>
    <section layout="row" flex>
        <div ng-include="'App/layout/sidenav.html'"></div>
        <md-content class="_md layout-column flex" layout="column" flex="">
            <div ng-include="'App/layout/toolbar.html'"></div>
            <div class="container body-content">
                @RenderBody()
            </div>
        </md-content>
    </section>
</div>
</body>

@RenderBody() brings up Index.html

<!-- this is where content will be injected -->
<div ng-view></div>

Home.html

<div>
<h1>Home Page</h1>
<p>{{ message }}</p>
</div>

My app.js

angular.
.module('app', [
        'app.core',
        'app.layout',
    ]);

})();

layout.module.js

(function () {
'use strict';

angular.module('app.layout', [
    'ngAnimate',
    'ngMaterial',
    'ngAria'
]);

})();

core.module.js

(function () {
'use strict';

angular.module('app.core', [
    'ngRoute'
]);

})();

and route.js:

angular.module('app.core')
    .config(function ($routeProvider, $locationProvider) {
        $routeProvider

        // route for the home page
        .when('/', {
            templateUrl: 'App/layout/home.html',
            controller: 'home'
        });// End routeprovider
    })// end config

And Finally the culprit... Home.js

(function () {
'use strict';

console.log('registering controller home before Angular');

angular
    .module('app.layout')
    .controller('home', home);

home.$inject = ['$scope']; 

function home($scope) {
    console.log('registering controller home');
    // create a message to display in our view
    $scope.message = 'Everyone come and see how good I look!';
}

})();

Now, When i have

.module('app);
.controller('home', home);

on home.js, the $scope.message displays

'Everyone come and see how good I look!'

but if i have

.module('app.layout')
.controller('home', home);

it displays

{{message}}

I know I'm losing scope somehow here, but I cant figure out how to fix it! Do I need to declare the controller again outside of the Router?

Manikandan Velayutham Manikandan Velayutham · Accepted Answer · 2017-09-19T13:10:35

I think Angular not able to get your home controller. You should inject app.layout in app.core module.

  angular.module('app.core', ['app.layout'])
    .config(function ($routeProvider, $locationProvider) {
        $routeProvider

        // route for the home page
        .when('/', {
            templateUrl: 'App/layout/home.html',
            controller: 'home'
        });// End routeprovider
    })// end config


angular.
.module('app.layout',[]).controller();

Losing scope between angular modules using ng-view

2 Answers