Question

我想使用带有ng-repeat的Angular Accordion。我面临一个奇怪的行为，在我的页面上没有正确解析html，我的手风琴根本不起作用。但是相同的代码就像plunkr上的魅力一样。

请参阅此plunkr：http://embed.plnkr.co/3Z450PxtGynDaTLh5zwl/

如果我检查上面的plunkr上的元素，我会得到像这样的html主体

<div ng-controller="AccordionDemoCtrl" class="ng-scope">
   <accordion>
      <div class="accordion" ng-transclude="">
         <!-- ngRepeat: group in groups -->
         <div class="accordion-group ng-scope" heading="Title 1" ng-repeat="group in groups">
            <div class="accordion-heading"><a class="accordion-toggle ng-binding" ng-click="isOpen = !isOpen" accordion-transclude="heading">Title 1</a></div>
            <div class="accordion-body collapse" collapse="!isOpen" style="height: auto;">
               <div class="accordion-inner" ng-transclude="">
                  <ul class="ng-scope">
                     <!-- ngRepeat: item in group.items -->
                     <li ng-repeat="item in group.items" class="ng-scope ng-binding">item 1</li>
                     <li ng-repeat="item in group.items" class="ng-scope ng-binding">item 2</li>
                  </ul>
               </div>
            </div>
         </div>
         <div class="accordion-group ng-scope" heading="Title 2" ng-repeat="group in groups">
            <div class="accordion-heading"><a class="accordion-toggle ng-binding" ng-click="isOpen = !isOpen" accordion-transclude="heading">Title 2</a></div>
            <div class="accordion-body collapse" collapse="!isOpen" style="height: 0px;">
               <div class="accordion-inner" ng-transclude="">
                  <ul class="ng-scope">
                     <!-- ngRepeat: item in group.items -->
                     <li ng-repeat="item in group.items" class="ng-scope ng-binding">item 3</li>
                     <li ng-repeat="item in group.items" class="ng-scope ng-binding">item 4</li>
                  </ul>
               </div>
            </div>
         </div>
      </div>
   </accordion>
</div>

但是当我在网页上运行完全相同的代码时，我会得到这样的HTML：

<div ng-controller="AccordionDemoCtrl" class="ng-scope">
   <accordion>
      <!-- ngRepeat: group in groups -->
      <accordion-group heading="Title 1" ng-repeat="group in groups" class="ng-scope">
         <ul>
            <!-- ngRepeat: item in group.items -->
            <li ng-repeat="item in group.items" class="ng-binding ng-scope">item 1</li>
            <!-- end ngRepeat: item in group.items -->
            <li ng-repeat="item in group.items" class="ng-binding ng-scope">item 2</li>
            <!-- end ngRepeat: item in group.items -->
         </ul>
      </accordion-group>
      <!-- end ngRepeat: group in groups -->
      <accordion-group heading="Title 2" ng-repeat="group in groups" class="ng-scope">
         <ul>
            <!-- ngRepeat: item in group.items -->
            <li ng-repeat="item in group.items" class="ng-binding ng-scope">item 3</li>
            <!-- end ngRepeat: item in group.items -->
            <li ng-repeat="item in group.items" class="ng-binding ng-scope">item 4</li>
            <!-- end ngRepeat: item in group.items -->
         </ul>
      </accordion-group>
      <!-- end ngRepeat: group in groups -->
   </accordion>
</div>

如果您仔细注意，工作副本会正确解析手风琴以纠正html和css类，但我页面上的那个没有正确解析它。我疯狂地弄清楚发生了什么，我真的不知道。

我已在线创建差异以进行比较：https://www.diffchecker.com/rG70Forz

我的bower.json

"dependencies": {
"angular": "^1.5.5",
"bootstrap": "3.3.4",
"angular-route": "^1.5.5",
"angular-touch": "^1.5.5",
"angular-animate": "^1.5.5",
"typed.js": "^1.1.1",
"underscore": "^1.8.3",
"angular-bootstrap": "^2.1.3",
"ui.bootstrap": "ui-bootstrap#^2.1.3",
"angular-ui-router": "^0.3.1"
},

我的app.js

angular
.module('myApp', [
    'ngRoute',
    'ngTouch',
    'ngAnimate',
    'ngMap',
    'underscore',
    'ui.bootstrap'
])

有人可以指出我可能做错了吗？如果我需要提供更多信息，请告诉我。

Answer 1

Chang bootstrap cdn URL一次。这个对我有用。 bootstrap css cdn link

angular.module('plunker', ['ui.bootstrap']).controller('AccordionDemoCtrl', function($scope){
  
  $scope.groups = [
    {
      title: "Title 1",
      items: [{"item-title": "item 1"}, {"item-title": "item 2"}]
    },
    {
      title: "Title 2",
      items: [{"item-title": "item 3"}, {"item-title": "item 4"}]
    }
  ];
  
});

<!doctype html>
<html ng-app="plunker">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.3.0.js"></script>
    <script src="example.js"></script>
    <!-- <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"> -->
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
  </head>
  <body>

<div ng-controller="AccordionDemoCtrl">


  <accordion>
    <accordion-group heading="{{group.title}}" ng-repeat="group in groups">
      <ul>
        <li ng-repeat="item in group.items">{{item['item-title']}}</li>
      </ul>
    </accordion-group>   
  </accordion>
</div>
  </body>
</html>

Angular Accordion无法解析以纠正html

1 个答案: