Angularjs 角度UI引导-折叠功能不工作
我一直在跟踪调查。在(ui.bootstrap.collapse)一节中,他们讨论了在单击按钮时为内容创建一个折叠函数 但我似乎无法让崩溃在我的代码中起作用 我错过了什么或做错了什么 我看过其他堆栈,看到其他人使用锚定标签而不是按钮标签。所以我认为这不是问题所在 索引HTMLAngularjs 角度UI引导-折叠功能不工作,angularjs,angular-ui-bootstrap,collapse,Angularjs,Angular Ui Bootstrap,Collapse,我一直在跟踪调查。在(ui.bootstrap.collapse)一节中,他们讨论了在单击按钮时为内容创建一个折叠函数 但我似乎无法让崩溃在我的代码中起作用 我错过了什么或做错了什么 我看过其他堆栈,看到其他人使用锚定标签而不是按钮标签。所以我认为这不是问题所在 索引HTML <!DOCTYPE html> <html lang="en" data-ng-app="app"> <head> <meta charset="UTF-8"> <me
<!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>
<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'});
});
app.controller('LandingCtrl', function($scope) { // jshint ignore:line
$scope.pageClass = 'page-landing';
$scope.isCollapsed = true;
});
我解决了这个问题。我以前使用Jquery来切换显示或隐藏或显示 在我的Css中,我有:
myContent {
display: none;
}
一旦我删除了它。它工作得非常好。我解决了这个问题。我以前使用Jquery来切换显示或隐藏或显示 在我的Css中,我有:
myContent {
display: none;
}
一旦我删除了它。它工作得非常好。你的小提琴不工作:(它甚至不能引导angular应用程序(例如,
ng app=“app”在哪里)
在你的HTML中?你在这里发布的代码也是如此。@SunilD。我更新了我的堆栈。出于某种原因,如果我将脚本放入实际的HTML中,它在JSFIDLE中工作。它在我的应用程序中仍然不起作用。因此,我在我的项目中提供了更多关于它如何工作的信息,让你更好地理解。好的,这现在开始变得更有意义了。我发现一件可能有问题的事情是在LandingPage.html(基于您的小提琴)中,您可以ng controller=“LandingCtrl”
。但是由于您使用的是ngRoute
,并且已经在路由定义中指定了要使用的控制器,因此您正在实例化两个控制器。可能就这么简单,但谁知道呢。我通常在路由定义中指定控制器,并将其从HTML中删除。@SunilD。不,我实际上没有ng controller是在实际的html中定义的。我只是将它放在小提琴中,因为它需要在小提琴中工作。我现在将该页面html的实际代码放在那里,并删除了小提琴。我在应用程序中只定义了一次控制器。所以这不是问题。似乎工作正常:。检查控制台是否有错误。如果你的pp加载失败或抛出错误,可能会导致执行停止。如果没有错误,请检查所有AngularJS文件(angular、animate、route、Cookie)的版本号并确保它们都是相同的版本,至少是1.3.x。如果它们都是好的,请注释掉你的CSS文件,并确保没有CSS冲突(例如使用display:block!important)。你的小提琴不起作用:(它甚至没有引导angular应用程序(例如,ng app=“app”在哪里)
在你的HTML中?你在这里发布的代码也是如此。@SunilD。我更新了我的堆栈。出于某种原因,如果我将脚本放入实际的HTML中,它在JSFIDLE中工作。它在我的应用程序中仍然不起作用。因此,我在我的项目中提供了更多关于它如何工作的信息,让你更好地理解。好的,这现在开始变得更有意义了。我发现一件可能有问题的事情是在LandingPage.html(基于您的小提琴)中,您可以ng controller=“LandingCtrl”
。但是由于您使用的是ngRoute
,并且已经在路由定义中指定了要使用的控制器,因此您正在实例化两个控制器。可能就这么简单,但谁知道呢。我通常在路由定义中指定控制器,并将其从HTML中删除。@SunilD。不,我实际上没有ng controller是在实际的html中定义的。我只是将它放在小提琴中,因为它需要在小提琴中工作。我现在将该页面html的实际代码放在那里,并删除了小提琴。我在应用程序中只定义了一次控制器。所以这不是问题。似乎工作正常:。检查控制台是否有错误。如果你的pp加载失败或抛出错误,可能会导致执行停止。如果没有错误,请检查所有AngularJS文件(angular、animate、route、Cookie)的版本号并确保它们都是相同的版本,至少是1.3.x。如果它们都是好的,请注释掉您的CSS文件,并确保没有CSS冲突(例如使用display:block!important)。