Angular UI导航栏折叠不起作用答案

【问题标题】：Angular UI navbar collapse not workingAngular UI导航栏折叠不起作用
【发布时间】：2015-07-18 08:10:29
【问题描述】：

我似乎无法通过以下代码让我的导航栏开始折叠。我正在使用 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;，菜单仍然以打开状态开始。

【问题讨论】：

宾果游戏，谢谢！我的指令使用controllerAs: 'navbar'，但我的HTML 在isCollapsed 前面缺少navbar。是时候让它过夜了，这是一个愚蠢的错误哈哈。
我没有注入这样的服务，但我通常将$rootScope 设置为我的服务的依赖项，修改它，然后（如果是隔离范围）在控制器中设置$scope.x = $rootScope.x。我也没有看到使用this的控制器，你的意思是注入$scope并设置$scope.vm.isCollapsed并访问collapse="vm.isCollapsed"？
@Plato 不，当使用 controllerAs 别名时，您在控制器中使用 this...然后使用该别名作为视图中所有变量的前缀

标签： javascript html css angularjs angular-ui-bootstrap

【解决方案1】：

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

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

--或--

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

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

【讨论】：