Angularjs 为什么Angular ui引导手风琴即使在看过其他解决方案后也无法工作？_Angularjs_Accordion_Angular Ui Bootstrap

Angularjs 为什么Angular ui引导手风琴即使在看过其他解决方案后也无法工作？

angularjs

Angularjs 为什么Angular ui引导手风琴即使在看过其他解决方案后也无法工作？,angularjs,accordion,angular-ui-bootstrap,Angularjs,Accordion,Angular Ui Bootstrap,我的问题与我看到的问题相同，例如：但这个解决方案并没有解决我的问题这是我在plunker中的代码。在记事本++中，“手风琴”是黑色的。不确定这是否相关。在此处输入代码编辑、添加文件： // create the module and name it calendarDemoApp //var calendarDemoApp = angular.module('calenderDemoApp', ['ui.bootstrap']); // create the module and n

我的问题与我看到的问题相同，例如：

但这个解决方案并没有解决我的问题

这是我在plunker中的代码。在记事本++中，“手风琴”是黑色的。不确定这是否相关。

在此处输入代码

编辑、添加文件：

// create the module and name it calendarDemoApp
//var calendarDemoApp = angular.module('calenderDemoApp', ['ui.bootstrap']);

// create the module and name it scotchApp

var scotchApp = angular.module('scotchApp', [
'ngRoute',
//'ui.bootstrap'
//'ngAnimate'
])
// configure our routes
scotchApp.config(function($routeProvider) {
    $routeProvider

        // route for the home page
        .when('/', {
            templateUrl : 'landing.html',
            controller  : 'mainController'
        })

        // route for the about page
        .when('/about', {
            templateUrl : 'about.html',
            controller  : 'aboutController'
        })

        // route for the settings page
        .when('/settings', {
            templateUrl : 'settings.html',
            controller  : 'settingsController'
        })

        .when('/find', {
            templateUrl : 'find.html',
            controller  : 'findController'
        })

        .when('/myReservation', {
            templateUrl : 'myReservation.html',
            controller  : 'myReservationController'
        });
        /*
        .when('/confirm',{
            templateUrl : 'confirm.html',
            controller  : 'confirmController'
        });*/
});

// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function($scope) {

    $scope.doTheBack = function($scope){
        window.history.back();

    };
    // create a message to display in our 
    $scope.message = 'Would you like reserve a room or search your reservations?';      
});

scotchApp.controller('aboutController', function($scope) {
    $scope.message = 'Look! I am an about page.';
});

scotchApp.controller('myReservationController', function($scope) {
    $scope.message = 'Look! I am an about page.';
});

scotchApp.controller('settingsController', function($scope) {
    $scope.message = 'Your account settings';
});

scotchApp.controller('findController', function($scope) {
    $scope.message = 'Here is your reservations.';
    $(document).ready(function(){
        $(".collapse").click(function(){
            $(".collapse").collapse('toggle');
        });
    }); 


});

以下是html：

<!DOCTYPE HTML>
<html lang="en-US" ng-app="scotchApp">
<head>
<meta charset="UTF-8">
<title>Accordion test</title>
<script src="angular.js"/>
<script src="angular-route.js"/>
<script src="../bower_components/angular-route/angular-route.js"></script>
<script src="../bower_components/angular-animate/angular-animate.js">        </script>
<script type="text/javascript"    src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.5/angular.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.4.0/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="landingScript.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"></link>
</head>
<body>
<div ng-controller="findController">
<label class="checkbox">
<input type="checkbox" ng-model="oneAtATime">
Open only one at a time
</label>

<accordion close-others="oneAtATime">
<accordion-group heading="Static Header">
  This content is straight in the template.
</accordion-group>
<accordion-group heading="{{group.title}}" ng-repeat="group in groups">
  {{group.content}}
</accordion-group>
<accordion-group heading="Dynamic Body Content">
  <p>The body of the accordion group grows to fit the contents</p>
    <button class="btn btn-small" ng-click="addItem()">Add Item</button>
    <div ng-repeat="item in items">{{item}}</div>
</accordion-group>
</accordion>
</div>

问题是您未能将解决方案集成到应用程序中。你不能只是复制粘贴

解决方案的第一步是创建要正确使用的模块

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

上面的代码就是plunker中的代码。scotchApp没有在html中使用，您希望使用的是下面的代码

var scotchApp = angular.module('calenderDemoApp', ['ngRoute','ui.bootstrap','ngAnimate'])

这应该可以解决第一个问题。我要看的几件事是AccordionDemoCtrl没有正确定义，而且您可能会在如何加载JavaScript文件方面遇到问题。（订单）

在您的回答中，我得到了一些提示，我的解决方案（可能）。不，没关系。这还是不能做手风琴的事情。什么手风琴的事情？对我来说，它似乎工作得很好。accordion在plunker上工作，但当我使用htmls/脚本在我的机器上本地运行它时，它就不工作了。如果OP中的代码仍然正确，那么您需要在其他angular脚本之前加载angular.min.js。这是因为其他模块依赖于角度。如果顺序正确，那么您可以检查控制台，看看是否有关于找不到脚本的错误。

var scotchApp = angular.module('calenderDemoApp', ['ngRoute','ui.bootstrap','ngAnimate'])