手风琴不适用于最新版本的ui-bootstrap-tpls.js

时间:2018-07-12 05:27:51

标签: angularjs angular-ui-bootstrap accordion

我有一个手风琴可以在ui-bootstrap-tpls.js的较旧版本(0.13.0)中使用,但不能在ui-bootstrap-tpls.js的最新版本(2.5.0)中使用。由于版本较旧,因此影响其他组件正常工作。我只需要使用最新版本。有人可以帮我吗?下面是我的代码。

HTML

<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css'>
<body ng-app="app">
    <h1>Dynamic accordion: nested lists with html markup</h1>   
  <div ng-controller="AccordionDemoCtrl">
    <accordion close-others="oneAtATime">
      <accordion-group is-open="group.isOpen" ng-repeat="group in groups">
        <accordion-heading><i class="glyphicon-plus"></i> {{ group.title }}
          <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': group.isOpen, 'glyphicon-chevron-right': !group.isOpen}"></i>
        </accordion-heading>
        {{ group.content }}
        <ul>
          <li ng-repeat="item in group.list">
            <span ng-bind-html="item"></span>
          </li>
        </ul>       
      </accordion-group>
    </accordion>
  </div>
  </body>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.4/angular-filter.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-sanitize.js'></script>
<!--<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.js'></script>-->
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.js'></script>
<script  src="js/index.js"></script>

index.js

angular.module('app', ['ui.bootstrap','ngSanitize','angular.filter']);
angular.module('app').controller('AccordionDemoCtrl', function ($scope) {
  $scope.oneAtATime = true;

  $scope.groups = [
    {
      title: 'title 1',
      content: 'content 1',
      isOpen: true,
      list: ['<i>item1a</i> blah blah',
        'item2a',
        'item3a']
    },
    {
      title: 'title 2',
      content: 'Content 2',
      list: ['item1b',
        '<b>item2b </b> blah ',
        'item3b'] 
    },
    {
      title: 'title 3',
      content: 'Content 3'
    },
    {
      title: 'title 4',
      content: 'content 4'
    },
    {
      title: 'title 5',
      content: 'content 5'
    }
  ];
});

0 个答案:

没有答案