Ui Bootstrap(AngularJS)侧边栏推拉切换功能异常问题

Hey there! Let's get that sidebar push/pull functionality working properly. The main issue here is that your main content's position isn't tied to the sidebar's collapse state—right now it's static, so it doesn't move when the sidebar opens/closes. Let's walk through the fixes step by step.

First, Add Your Controller Logic #

You're missing the controller initialization for your app. Let's define the module and controller, and set an initial state for the sidebar:

angular.module('uiBootstrapBlog', ['ui.bootstrap'])
  .controller('navbarCtrl', function($scope) {
    // Start with the sidebar collapsed by default
    $scope.isCollapsedHorizontal = true;
  });

Fix the Sidebar Container & Dynamic Styling #

Your current sidebar container has a fixed 230px width, which means it takes up space even when collapsed. We'll adjust that, and use ng-style to dynamically update the main content's position based on the sidebar state.

Here's the modified HTML with key changes:

<!doctype html>
<html lang="en" ng-app="uiBootstrapBlog">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-sanitize.js"></script>
  <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
  <link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <script>
    angular.module('uiBootstrapBlog', ['ui.bootstrap'])
      .controller('navbarCtrl', function($scope) {
        $scope.isCollapsedHorizontal = true;
      });
  </script>
</head>
<body>
  <div ng-controller="navbarCtrl">
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <ul class="nav navbar-nav">
          <!-- Simplify the toggle: uib-btn-checkbox handles the model toggle automatically -->
          <li style="font-size:30px; cursor:pointer;color:white" 
              ng-model="isCollapsedHorizontal" 
              uib-btn-checkbox>&#9776;</li>
        </ul>
      </div>
    </nav>

    <!-- Sidebar container: remove fixed width, let uib-collapse handle the width transition -->
    <div style="position: fixed;">
      <div class="horizontal-collapse" 
           uib-collapse="isCollapsedHorizontal" 
           horizontal 
           style="margin-top: 50px !important; width: 230px; min-height: 150px; max-height: 80vh; background: gray; color: black; padding-top: 25px;">
        <!-- Add your sidebar content here -->
        Sidebar Content
      </div>
    </div>

    <!-- Main content: use ng-style to dynamically adjust left position with ternary operator -->
    <div ng-style="{'left': isCollapsedHorizontal ? '0' : '230px'}" 
         style="position: absolute; top: 60px; transition: left .5s; width: 100%;" 
         id="main">
      grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>
      <!-- Rest of your main content -->
    </div>
  </div>
</body>
</html>

Key Changes Explained #

1. Controller Initialization: We set $scope.isCollapsedHorizontal = true so the sidebar starts collapsed.
2. Simplified Toggle Button: The uib-btn-checkbox directive automatically toggles the ng-model value, so we don't need the extra ng-click (it was redundant).
3. Dynamic Main Content Position: Using ng-style="{'left': isCollapsedHorizontal ? '0' : '230px'}" we tell the main content to sit at left:0 when the sidebar is collapsed, and shift right 230px when the sidebar is open. The transition: left .5s ensures smooth animation.
4. Sidebar Width Control: We moved the fixed 230px width to the collapsible div itself, so when uib-collapse="isCollapsedHorizontal" triggers, the sidebar's width animates to 0 (thanks to the horizontal attribute) instead of leaving an empty fixed-width container.

Why Your Original Ternary Didn't Work #

You weren't binding the main content's left property to the sidebar state variable. Static CSS doesn't react to AngularJS scope changes—you need to use ng-style to dynamically apply styles based on your scope variables.

内容的提问来源于stack exchange，提问作者Maximilian Both