happycoder happycoder - 3 months ago 8
AngularJS Question

$scope not working in my nav bar controller?

My Angular app is developed using a boilerplate of this yeoman generator.

Routing and all things working fine but I could not get to working $scope only on navbar-controller.js and footer-controller.js. Please tell me if you need more information to give a clue about this.

Index.html

<!DOCTYPE html>
<html lang='en' data-ng-app='app'>
<head>
<title>App</title>
<meta name='viewport' content='width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes'>
<!-- inject:head:js -->
<!-- endinject -->
<!-- inject:html -->
<!-- endinject -->
<!-- bower:css -->
<!-- endbower -->
<!-- inject:css -->
<!-- endinject -->
</head>
<body class="wrapper">

<div ng-controller="NavbarCtrl" ng-include="'navbar/navbar.tpl.html'"></div>

<!-- boxed-layout -->
<div class='container'>

<!--=== Main Content ===-->
<div data-ui-view></div>
<!--=== End Main Content ===-->

</div>

<!-- <div id="footer"
ng-controller="FooterCtrl" ng-include="'footer/footer.tpl.html'">
</div> -->

<!-- bower:js -->
<!-- endbower -->
<!-- inject:js -->
<!-- endinject -->
</body>
</html>


navbar-controller.js

(function () {
'use strict';

angular
.module('navbar')
.controller('NavbarCtrl', NavbarCtrl);

function NavbarCtrl() {
var vm = this;
vm.ctrlName = 'NavbarCtrl';

this.loginHeader = function(){
console.log("LOGIC called");
}
}
}());


navbar-module.js

(function () {
'use strict';
angular
.module('navbar', [
'ui.router'
]);
}());


navbar-routes.js

(function () {
'use strict';

angular
.module('navbar')
.config(config);

function config($stateProvider) {
$stateProvider
.state('navbar', {
url: '/navbar',
templateUrl: 'navbar/navbar.tpl.html',
controller: 'NavbarCtrl',
controllerAs: 'navbar'
});
}
}());


navbar-trl.html

....
.....
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Search</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li ng-hide="navbar.isLoggedIn"><a ui-sref="login">Login {{navbar.ctrlName}}</a></li>
<li ng-hide="navbar.isLoggedIn" ><a ui-sref="register">Signup</a></li>
<li ng-show="navbar.isLoggedIn"><a>Logged as {{navbar.username}}</a></li>
<li ng-show="navbar.isLoggedIn"><a ui-sref="login">Logout</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
....
.....


Update:
I found the answer. Thank you everyone.
I would like to know that in other controllers I'm not injecting $scope since I'm using controller as syntax and also it is working perfect. Can anyone please explain the reason behind this, why only in navbar I need to inject $scope?

Answer

You have to init and inject $scope like so:

(function(){
    'use strict';
    angular.module('navbar')
    .controller('NavbarCtrl', ['$scope', 'otherDependecy', function($scope, otherDependecy){
        yourAwesomeCodeGoesHere();
        $scope.someObject = 'Hello world';
    }]);
})();

OR: (just extract controller's main function)

(function(){
    'use strict';
    angular.module('navbar')
    .controller('NavbarCtrl', ['$scope', 'otherDependecy', NavbarCtrl]);

    function NavbarCtrl($scope, otherDependecy){
        yourAwesomeCodeGoesHere();
        $scope.someObject = 'Hello world';
    }

})();

@UPDATE:

You probably mean controllers of the directive? If so - they are initialized and injected automatically, you just have to remember to add $scope as an argument to your controller's function. That's all.

Comments