Ui Bootstrap（angularjs）sidenav 无法按预期工作答案

【问题标题】：Ui Bootstrap (angularjs) sidenav doesn't work as intendedUi Bootstrap（angularjs）sidenav 无法按预期工作
【发布时间】：2018-10-27 18:30:15
【问题描述】：

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

这是我的sn-p：

<!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>

【问题讨论】：

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

【解决方案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();

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

【讨论】：