AngularJS Controller $scope not displaying variable

Question

I am new to AngularJs.

In app.js I have the following

angular.module('module1', ['module2'])
    .config(function($routeProvider) {
        $routeProvider
            .when('/',
                {
                    controller: 'Controller1',
                    templateUrl: '/app/module/module1/partials/module1.html'
                });
    });

My module1 controller

angular.module('module1').controller('Controller1', function($scope) {
    $scope.module1Name = "Module1";
});

In module2 folder I have Index.js

angular.module('module2', []).config(function($routeProvider) {
    $routeProvider
        .when('/test',
            {
                controller: 'Controller1',
                templateUrl: '/app/module/module2/view/test.html'
            });
});;

Module2 controller

angular.module('module2').controller('Controller1', function ($scope) {
    $scope.module2Name = "Module2";
});

Here is my index.html

<html data-ng-app="module1">
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Angular</title>
    <script src="~/Scripts/angular.min.js"></script>
    <script src="~/App/app.js"></script>
    <script src="~/App/module/module2/index.js"></script>
    <script src="~/App/module/module2/controller/Controller1.js"></script>
    <script src="~/App/module/module1/controller/Controller1.js"></script>

</head>
<body>
    <div data-ng-view=""></div>
</body>
</html>

and module1.html

<div>
    f4b view {{module1Name}}
    <br/>
    <a data-ng-href="#/test">Test page</a>
</div>

and test.html

<div>
    Test view {{module2Name}} <br/>
        <a data-ng-href="#/">f4b page</a>
</div>

when I start the application the module1 name is displayed but when I click the link all I see is "Test view" without module2 {{module2Name}} is not displayed...

Can someone tell me what am I doing wrong? Thank you

The module that you have used in your view is called "f4b" - value of the ng-app directive. However, in your angular.module() code, nowhere you have defined this "module". I am honestly surprised that you manage to get the module1 template and module2 templates loaded in spite of that — callmekatootie
– callmekatootie, Commented Jun 10, 2013 at 15:45
sorry, it was a typo... I've fixed it... It was supposed to be "module1" — partyelite
– partyelite, Commented Jun 10, 2013 at 17:58

Mark Rajcok · Accepted Answer · 2013-06-10 20:18:00Z

1

Angular's $injector can't disambiguate between controllers that use the same name. One workaround is to manually namespace them:

angular.module('module1').controller('mod1.Controller1', 
...
angular.module('module2').controller('mod2.Controller1',

jsfiddle

See also https://groups.google.com/d/topic/angular/SZMFAKfx1Q8/discussion

answered Jun 10, 2013 at 20:18

Mark Rajcok

365k114 gold badges501 silver badges494 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS Controller $scope not displaying variable

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related