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导航栏崩溃无法正常工作

1 个答案: