javascript - 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>

导航栏.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

Controller 是使用 this 构建的，以允许 controllerAs 语法，但 html 中的变量设置为使用 $scope。

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

--或者--

需要更改 Controller 以将所有变量绑定(bind)到 $scope 而不是 this

不确定指令是如何配置的或 Controller 在 View 中的何处声明