Ui Bootstrap (angularjs) sidenav 无法正常工作

Question

我在尝试为我的一个项目创建 sidenav 时遇到问题。我的目的是创建一个侧边菜单，打开时将内容推到右边，关闭时内容应该移回左边，有点像切换功能。出于某种原因，我的三元运算符无法按预期工作。

这是我的片段：

<!doctype html>
<html lang="en">
<html 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">
  </head>
<body>
<div ng-controller="navbarCtrl">
 <nav class="navbar navbar-inverse navbar-fixed-top">
   <div class="container-fluid">
  <ul class="nav navbar-nav">
   <li style="font-size:30px; cursor:pointer;color:white" ng-click="isCollapsedHorizontal = !isCollapsedHorizontal" ng-model="singleModel" uib-btn-checkbox>&#9776;</li>
  </ul>
  
   </div>
 </nav>
 <div style="position: fixed; width: 230px">
  <div class="horizontal-collapse" uib-collapse="isCollapsedHorizontal" horizontal style="  margin-top: 50px !important; min-height: 150px; max-height: 80vh; background: gray; color: black; padding-top: 25px;" >    
  </div>
 </div>
 <div style="position: absolute; top: 60px; transition: left .5s;" id="main">grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br>grhgerhrehrehre<br></div>

</div>
  </body>
</html>
<script>
var uiBootstrapBlog = angular.module('uiBootstrapBlog', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
 uiBootstrapBlog.controller('navbarCtrl', function($scope) {
 $scope.singleModel = false;
 var menuSlide = document.getElementById("main");
 $scope.singleModel === false ? menuSlide.style.left = "250px" : menuSlide.style.left = "0";
});
</script>

Answer 1

它不起作用，因为代码在初始化后只被调用一次。按照以下三个步骤解决问题

定义一个函数并将isCollapsedHorizontal和最后两行代码放入其中。
您的三元运算符也有问题。将更改的变量分配给它的结果。
调用控制器内部的函数并使用ng-click。

$scope.slideMenu = function() {
  $scope.isCollapsedHorizontal = !$scope.isCollapsedHorizontal;

  var menuSlide = document.getElementById("main");
  menuSlide.style.left = $scope.singleModel ? "250px" : "0";
}
$scope.slideMenu();

<li style="font-size:30px; cursor:pointer;color:white" ng-click="slideMenu()" ng-model="singleModel" uib-btn-checkbox>&#9776;</li>

Ui Bootstrap (angularjs) sidenav 无法正常工作

Ui Bootstrap (angularjs) sidenav doesn't work as intended

html

javascript

css

angularjs

angular-ui-bootstrap