Angular UI-Bootstrap - 收起功能不起作用

我一直在關注docs for ui-bootstrap。在部分（ui.bootstrap.collapse）中，他們討論了在單擊按鈕時爲內容製作摺疊功能。Angular UI-Bootstrap - 收起功能不起作用

但我似乎無法讓崩潰似乎在我的代碼中工作。

我缺少什麼或者做錯了嗎？

我看過其他堆棧，並看到其他人使用錨標籤代替按鈕標籤。所以我不認爲這是問題。

指數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; 

});

來源

2015-06-27 Austin Perez

你的小提琴不起作用:(它甚至沒有引導角度的應用程序（例如，你的HTML中的'ng-app =「app」''在哪裏？）同樣可以說你在這裏發佈的代碼 –

@SunilD。我更新了我的堆棧，由於某種原因，它在JsFiddle中工作，如果我把腳本放到實際的html中，它仍然不能在我的應用程序中工作，所以我更多地關注它是如何在我的項目中工作的你可以更好地理解 –

好吧，現在開始變得更有意義了，有一件事我看到的可能是LandingPage.html（基於你的小提琴），你可以使用ng-controller =「LandingCtrl」但是由於你使用'ngRoute'並且已經在路由定義中指定了哪個控制器，所以你正在實例化兩個控制器，它可以像這樣簡單，但是誰知道，我通常在路由定義中指定控制器，並離開它t的HTML。 –

我解決了這個問題。我以前使用Jquery切換隱藏或顯示的顯示。

在我的CSS我有：

myContent { 
    display: none; 
}

一旦我刪除了。它工作得很好。

來源

2015-06-28 15:45:32

Angular UI-Bootstrap - 收起功能不起作用

回答

相關問題