Angular UI 导航栏折叠不起作用

Question

我似乎无法使用以下代码让我的导航栏以折叠方式启动。我正在使用 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();
}

当页面最小化到响应式导航栏开关出现时，菜单已经显示。即使我将其更改为 vm.isCollapsed = false;，菜单仍然以打开状态启动。

Answer 1

控制器使用 this 构建以允许 controllerAs 语法，但 html 中的变量设置为使用 $scope.

如果指令没有独立作用域，您需要在某处声明控制器的别名，并在所有变量前加上别名。

--或--

需要更改控制器以将所有变量绑定到 $scope 而不是 this

不确定如何配置指令或在视图中的何处声明控制器

Angular UI 导航栏折叠不起作用

Angular UI navbar collapse not working

html

javascript

css

angularjs

angular-ui-bootstrap