Angular-UI-Bootstrap 手风琴打开后一直在折叠

Question

我刚刚开始使用 AngularJs，我正在制作一个简单的网站导航应用程序，用于查询 API 的值。目前我正在尝试制作手风琴侧边栏小程序（parent 应用程序的 child 应用程序的正确术语是什么？）加载主要部分，然后在部分 header 被点击。

好吧，我让它正常工作而没有抛出错误（耶！）但是如果我应用 css，那么手风琴会变得胆怯和害羞，在隐藏之前只显示里面的内容不到一秒钟再次内容。很多时候我必须在某些事情发生之前点击 header 两次。

我猜它是 Bootstrap 的问题，因为正如我提到的，如果我删除 css 并只有原始的 html 输出，情况就不一样了。这是我的代码：

index.html

<!DOCTYPE html>
<html ng-app="navApp" ng-strict-di>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" />
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="../../assets/js/html5shiv.js"></script>
      <script src="../../assets/js/respond.min.js"></script>
    <![endif]-->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-resource.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-route.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-animate.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js" type="text/javascript"></script> 
    <script src="~/Areas/AngularTest/scripts/app.js"></script>



</head>
<body ng-cloak>
    <div ng-controller="menuController">
        <div ng-include src="'templates/sidebar.html'"></div>
    </div>
</body>
</html>

使用 Grunt 将我的 js 文件合并为一个 app.js 所以这里是单独的部分。

scripts/controllers/navController.js

var navApp = angular.module('navApp', [
    'ngResource',
    'ui.bootstrap',
    'ngAnimate'    
]);


navApp.controller('menuController', [
    '$scope',
    'navSectionList',
    'navGetCategories',

    function ($scope, navSectionList, navGetCategories) {
        $scope.navSectionList = navSectionList.query();
        $scope.getSectionID = function (event) {

            var sectionID = event.currentTarget.attributes["data-id"].value;
            $scope.sectionID = sectionID;

            $scope.navGetCategories = navGetCategories
                .getResource(sectionID)
                .query();

        };
    }
],
    function ($scope) {
        $scope.oneAtATime = true;
        $scope.status = {
            isFirstOpen: true,
            isFirstDisabled: false
        };
    }

);

scripts/services/navService.js

navApp.factory('navSectionList', [
    '$resource', function ($resource) {
        return $resource('/api/navigation/section/list', {}, {
            query: { method: 'GET', params: {}, isArray: true }
        });
    }
]);

navApp.factory('navGetCategories', ['$resource', function ($resource) {
    var service = {
        getResource: function (sectionID) {
            return $resource('/api/navigation/category/' + sectionID, {}, {
                query: { method: 'GET', params: {}, isArray: true }
            });
        }
    };
    return service;

}]);

templates/sidebar.html

<div class="sidebar">
    <uib-accordion close-others="oneAtATime">
        <div uib-accordion-group class="panel-default" heading="Products" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
            <ul>
                <li>New Arrivals</li>
                <li>On Sale</li>
            </ul>
        </div>
        <div uib-accordion-group class="panel-default" heading="{{section.name}}" ng-click="getSectionID($event)" ng-repeat="section in navSectionList" data-id="{{section.id}}">
            <ul ng-repeat="categories in navGetCategories">
                <li ng-show="categories.pid == section.id">
                    {{categories.name}}
                </li>
            </ul>
        </div>
    </uib-accordion>
</div>

目前我还不太了解 AngularJs，无法弄清楚发生了什么。你认为我应该怎么做才能解决这个问题？

Answer 1

天哪，我又做了一次。所以事实证明你必须小心你使用的 bootstrap.css 的版本。如果它 Angular-UI 不支持，那么您将得到所有有趣的事情。

将 css 替换为以下内容有助于解决此问题。

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css

版本 4 对于 ui.bootstrap 来说太先进了。

Angular-UI-Bootstrap 手风琴打开后一直在折叠

Angular-UI-Bootstrap accordion keeps collapsing right after opening

angularjs

angular-ui-bootstrap