Question

我刚刚开始使用AngularJs，我正在创建一个简单的网站导航应用程序，用于查询API的值。目前我正在尝试制作手风琴侧边栏小程序（是父应用程序的子应用程序的正确术语吗？）加载主要部分，然后列出单击部分标题时的类别。

嗯，我没有犯错误就开始工作了（耶！）但是如果我应用了css，那么手风琴变得胆怯和害羞，只能在内部显示不到一秒钟，然后再次隐藏内容。很多时候，我必须在事情发生前两次点击标题。

我猜测它与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有助于解决此问题。

pexpect

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

Angular-UI-Bootstrap手风琴在打开后不断折叠

1 个答案: