Angular UI-Bootstrap - 折叠功能不起作用答案

【问题标题】：Angular UI-Bootstrap - Collapse function not workingAngular UI-Bootstrap - 折叠功能不起作用
【发布时间】：2015-09-14 11:40:59
【问题描述】：

我一直在关注docs for ui-bootstrap。在 (ui.bootstrap.collapse) 部分中，他们谈到了在您单击按钮时为内容制作折叠功能。

但我似乎无法让 Collapse 在我的代码中起作用。

我错过了什么或做错了什么？

我查看了其他堆栈，并看到其他人使用锚标签而不是按钮标签。所以我认为这不是问题。

索引 HTML

<!DOCTYPE html>
<html lang="en" data-ng-app="app">
<head>
<meta charset="UTF-8">
<meta name="description" content="stuff">
<meta name="keywords" content="stuff">
<meta name="author" content="stuff">

<title> Title</title>

<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.css">

<!-- Custom styles -->
<link href="css/style.css" rel="stylesheet">
<link href="css/svg_style.css" rel="stylesheet">


<!--Jquery -->
<script src="lib/jquery/dist/jquery.min.js"></script>

<!-- Angular -->
<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular-route/angular-route.min.js"></script>
<script src="lib/angular-animate/angular-animate.min.js"></script>
<script src="lib/angular-cookies/angular-cookies.min.js"></script>

<!-- Bootstrap -->
<script src="lib/angular-bootstrap/ui-bootstrap.min.js"></script>
<script src="lib/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>

</head>

<body id="index_body">
<div data-ng-controller="HeaderCtrl">
    <div class="top-header" data-ng-include="templateUrl"></div>
</div>

    <div class="page [[ pageClass ]]" ng-view autoscroll="true"></div>

<!-- Main JS -->
<script src="js/app.js"></script>

<!-- Controllers -->
<script src="js/controllers/headerCtrl.js"></script>
<script src="js/controllers/modal.js"></script>
<script src="js/controllers/ResonanceCtrl.js"></script>
<script src="js/controllers/ContactCtrl.js"></script>
<script src="js/controllers/LandingCtrl.js"></script>
<script src="js/controllers/SignInCtrl.js"></script>

<!-- Directives -->
<!-- <script src="js/directives/LandingAnimation.js"></script> -->


<script src="js/jq.js"></script>
</body>

</html>

着陆页 HTML

<div class="col-xs-12 col-sm-12 col-md-5">
    <div class="caption">
         <h1 class="text-left h-color thin">
  Text Header
</h1>

        <p class="lead p-color">More Text</p>
        <!-- Here is my Toggle Button --> <a class="lead p-color learn-button togglebtn shake shake-rotate" data-ng-click="isCollapsed = !isCollapsed"> 
  <small>
  <i class="glyphicon" data-ng-class="{'glyphicon-minus': status.open, 'glyphicon-plus': !status.open}"></i> Learn More
  </small>
</a>

    </div>
</div>
<div class="hidden-xs hidden-sm col-md-7 col-lg-offset-1 col-lg-6">
    <img alt="Image" class="img-responsive center-block" src="images/kip-animation.png" />
</div>

<!--Here is the what I want to collapse -->
<div id="myContent" collapse="isCollapsed" class="row row-offset row-pad" style="margin: 0 30px">
    <div class="col-xs-6 col-sm-4 col-md-4">
        <div class="lead caption text-center">
             <h3 class="h-color2">Item 1</h3>

        </div>
        <div class="thumbnail">
            <img style="height: 100px; width: auto;" class="img-circle" src="images/logo-bunny.png" alt="Logo">
            </div>
        <div class="lead caption">
            <p class="p-color"><small>Text</small>
            </p>
        </div>
    </div>
    <div class="col-xs-6 col-sm-4 col-md-4">
        <div class="lead caption text-center">
             <h3 class="h-color2">Item 2</h3>

        </div>
        <div class="thumbnail">
            <img style="height: 100px; width: auto;" class="img-circle" src="images/logo-bunny.png" alt="Logo">
        </div>
        <div class="lead caption">
            <p class="p-color"><small>Text</small>
            </p>
        </div>
    </div>
    <div class="col-xs-6 col-sm-4 col-md-4">
        <div class="lead caption text-center">
             <h3 class="h-color2">Item 3</h3>

        </div>
        <div class="thumbnail">
            <img style="height: 100px; width: auto;" class="img-circle" src="images/logo-bunny.png" alt="Logo">
        </div>
        <div class="lead caption">
            <p class="p-color"> <small>Some Text</small>

            </p>
        </div>
    </div>
</div>
<!-- END DROPDOWN-->

应用 Javascript

 var app = angular.module('app', ['ui.bootstrap', 'ngRoute', 'ngAnimate']);

app.config(function($interpolateProvider, $routeProvider) {
  $interpolateProvider.startSymbol('[[');
  $interpolateProvider.endSymbol(']]');

  $routeProvider

    .when('/', {
      templateUrl : 'pages/LandingPage.html',
      controller : 'LandingCtrl'
  })
  .otherwise({ redirectTo: '/signin'});
});

控制器 Javascript

app.controller('LandingCtrl', function($scope) { // jshint ignore:line
$scope.pageClass = 'page-landing';

$scope.isCollapsed = true;

});

【问题讨论】：

你的小提琴不起作用 :( 它甚至没有引导 Angular 应用程序（例如，你的 HTML 中的 ng-app="app" 在哪里？你在这里发布的代码也是如此。跨度>
@SunilD。我更新了我的堆栈。出于某种原因，如果我将脚本放入实际的 html 中，它可以在 JsFiddle 中工作。它仍然无法在我的应用程序中运行。所以我在我的项目中提供了更多它是如何工作的，以便让您更好地理解。
好的，现在开始变得更有意义了。我看到可能有问题的一件事是在 LandingPage.html 中（基于您的小提琴），您可以使用ng-controller="LandingCtrl"。但是由于您使用的是ngRoute 并且已经在路由定义中指定了要使用的控制器，因此您正在实例化两个控制器。可能就这么简单，但谁知道呢。我通常在路由定义中指定控制器，并将其放在 HTML 之外。
@SunilD。不，我实际上没有在实际的 html 中定义 ng-controller。我只是把它放在小提琴中，因为它需要它在小提琴中工作。我现在把那个页面的 html 的实际代码放在那里并删除了小提琴。我在应用程序中只定义了一次控制器。所以这不是问题。
似乎工作正常：plnkr.co/edit/bdF4XnCiVhnnmM00QpEk?p=info。检查控制台是否有错误。如果您的应用程序中的其他内容无法加载或以其他方式引发错误，则可能会导致执行停止。如果没有错误，请检查所有 AngularJS 文件（角度、动画、路由、cookie）的版本号，并确保它们版本相同且至少为 1.3.x。如果它们都很好，请注释掉您的 CSS 文件并确保没有 css 冲突（例如使用 display: block !important）。

标签： angularjs angular-ui-bootstrap collapse

【解决方案1】：

我解决了这个问题。我之前使用 Jquery 来切换显示隐藏或显示。

在我的 Css 中，我有：

myContent {
  display: none;
}

一旦我删除了它。效果很好。

【讨论】：