Почему Angular UI-bootstrap аккордеон не работает даже после рассмотрения других решений?

0

У меня та же проблема, что и вопросы, которые я видел, такие как: Угловой ui-bootstrap аккордеон не работает

НО решение не решило мою проблему.

Вот код, который у меня есть в plunker. В notepad++ "аккордеон" черный. Не уверен, что это актуально. enter code here http://plnkr.co/edit/6ea0esLpoLkBE6OBhKiK?p=preview

EDIT, добавление файлов:

// 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 $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>

Ниже приводится описание bower.json

"dependencies": {
"angular": "~1.4.1",
"angular-bootstrap": "~0.13.4",
"angular-ui-calendar": "~1.0.1",
"fullcalendar": "~2.3.2",
"jquery": "~2.1.4",
"moment": "~2.10.3"
},
"devDependencies": {
"angular-mocks": "~1.x",
"bootstrap-css": "2.3.1"
},
Теги:
angular-ui-bootstrap
accordion

1 ответ

0

Проблема в том, что вам не удалось интегрировать решение в ваше приложение. Вы не можете просто скопировать пасту.

Первым шагом к вашему решению является создание модуля, который будет использоваться должным образом.

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

Код выше - это то, что находится в плункере. scotchApp не используется в html, и то, что вы хотите использовать, - это код ниже.

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

Это должно решить первую проблему. Несколько вещей, на которые я бы посмотрел, это AccordionDemoCtrl, которые не определены должным образом, а также могут возникнуть проблемы с загрузкой файлов JavaScript. (Order)

Поделиться
  • 0
    С некоторыми подсказками в вашем ответе я получил свое решение (возможно). plnkr.co/edit/mj3AOW0R87plk3k2Joxs?p=preview
  • 0
    Нет, неважно. Это все еще не в состоянии делать аккордеонные вещи.
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню