Angular UI navbar collapse not working

Question

I can't seem to get my navbar to start as collapsed with the below code. I'm using Angular-ui-bootstrap:

navbar.directive.html:

<button type="button" ng-click="isCollapsed = !isCollapsed">
  <span class="sr-only">Toggle navigation</span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button>
<div collapse="isCollapsed">
  <ul class="nav navbar-nav">
    <li>Test</li>
    <li>Testing...</li>
  </ul>
</div>

navbar.controller.js:

angular.module('gameApp')
  .controller('NavbarController', NavbarController);

NavbarController.$inject = ['playersService'];

function NavbarController(playersService) {
  var vm = this;
  vm.isCollapsed = true;

  var getCurrentPlayer = function() {
    playersService.getCurrentPlayer().$promise.then(function(data) {
      vm.player = data.player;
    });
  };

  var init = function() {
    getCurrentPlayer();
  };

  init();
}

When the page is minimized to the point where the responsive navbar toggle appears the menu is already showing. Even if I change it to vm.isCollapsed = false; the menu still starts as open.

Bingo, thanks! My directive uses controllerAs: 'navbar', but my HTML is missing navbar in front of isCollapsed. Time to call it quits for the night, that was a bonheaded mistake haha. — MattDionis
– MattDionis, Commented Jul 18, 2015 at 0:08
I haven't injected a service like this but I usually set $rootScope as a dependency of my service, modify it, and (if isolated scope) set $scope.x = $rootScope.x in controller. I also haven't seen a controller using this, did you mean to inject $scope and set $scope.vm.isCollapsed and access collapse="vm.isCollapsed"? — Plato
– Plato, Commented Jul 18, 2015 at 0:15
@Plato no, you use this in controller when using controllerAs alias...then use that alias as prefix for all variables in view — charlietfl
– charlietfl, Commented Jul 18, 2015 at 0:21

charlietfl · Accepted Answer · 2015-07-18 00:10:29Z

3

Controller is built using this to allow controllerAs syntax but variables in html are set up to use $scope.

If directive does not have isolated scope you need to declare the alias for controller somewhere and prefix all the variables with the alias.

--OR--

Need to change controller to bind all the variables to $scope not this

Not sure how directive is configured or where controller is being declared in the view

answered Jul 18, 2015 at 0:10

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

Collectives™ on Stack Overflow

Angular UI navbar collapse not working

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