Question

我刚刚基于angular-fullstack-generator将ui-bootstrap添加到我的包中。在此之前，我使用以下代码在路径更改时折叠小型设备上的导航栏：

$rootScope.$on('$stateChangeSuccess', function (event, next) {
  // collapse navbar
  angular.element('.navbar-collapse').collapse('hide');
});

这是不可能的，因为我从＃1672了解指令，但我怎么能手动折叠导航栏呢？

提前致谢，迈克尔

Answer 1

只需在每个ng-click上添加（或增强）<a>处理程序，您就可以在点击时折叠导航栏（对我来说感觉更自然）：

<a ng-href="{{item.link}}" ng-click="isCollapsed=true">{{item.title}}</a>
<a href="" ng-click="isCollapsed=true;changeLanguage('en')">{{ 'LANG_BUTTON_EN' | translate }}</a>

如果您在$stateChangeSuccess事件后确实需要它，请向navbar.controller.js添加相同的事件监听器（不需要听$rootScope - 或者此事件是否有限？我不知道所以请谨慎使用）：

angular.module('jayMapApp')
    .controller('NavbarCtrl', function ($scope, $location, $translate, Auth) {
        ...
        $scope.$on('$stateChangeSuccess', function (event, next) {
            $scope.isCollapsed = true;
        });
        ...

路线更改时折叠导航栏

1 个答案: