Angular Bootstrap 手风琴的模板错误

Question

我在发布问题之前进行了搜索，但找不到任何帮助。基本上，我将 Angular 和 Bootstrap 与 ui.angular.js 一起使用。对于像我这样的人，我无法让手风琴工作，因为根据我从开发工具得到的错误参考了 accordion.html 和手风琴-group.html。

借助 Internet 上的一些快速帮助，我执行了以下操作：

html:

    <div ng-controller="pptController">
  <p>
    <button class="btn btn-default btn-sm" ng-click="status.open = !status.open">Toggle last panel</button>
    <button class="btn btn-default btn-sm" ng-click="status.isFirstDisabled = ! status.isFirstDisabled">Enable / Disable first panel</button>
  </p>

  <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, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
      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-default btn-sm" ng-click="addItem()">Add Item</button>
        <div ng-repeat="item in items">{{item}}</div>
    </accordion-group>
    <accordion-group is-open="status.open">
        <accordion-heading>
            I can have markup, too! <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
        </accordion-heading>
        This is just some content to illustrate fancy headings.
    </accordion-group>
  </accordion>
</div>

javascript 在我的控制器中：

app.controller('pptController', ['$scope', 'pptService', function ($scope, pptService) {

    $scope.ppt = [];

    pptService.getPpt().then(function (results) {

        $scope.ppt = results.data;

    }, function (error) {
        //alert(error.data.message);
    });

  $scope.oneAtATime = true;

  $scope.groups = [
    {
      title: 'Dynamic Group Header - 1',
      content: 'Dynamic Group Body - 1'
    },
    {
      title: 'Dynamic Group Header - 2',
      content: 'Dynamic Group Body - 2'
    }
  ];

  $scope.items = ['Item 1', 'Item 2', 'Item 3'];

  $scope.addItem = function() {
    var newItemNo = $scope.items.length + 1;
    $scope.items.push('Item ' + newItemNo);
  };

  $scope.status = {
    isFirstOpen: true,
    isFirstDisabled: false
  };    

}]);

我在 Chrome 开发工具中遇到的错误：

我知道我在这里遗漏了一些东西，它应该很简单。希望有人能尽快帮我详细说明！

非常感谢！

Answer 1

看来模板文件无法加载。确保您可以从浏览器中导航到文件 http://localhost:9000/...../accordion.html...

最有可能在指定模板位置时出现拼写错误...

Answer 2

Angular Bootstrap 使用独立模板文件。确保将 ui-bootstrap-tpls.js 与 ui-bootstrap.js 文件一起包括在内。

您可以看到这是由于 ui-bootstrap 没有模板造成的：

.directive('accordion', function () {
   return {
       restrict:'EA',
       controller:'AccordionController',
       transclude: true,
       replace: false,
       templateUrl: 'template/accordion/accordion.html'
    };
})

Angular Bootstrap 手风琴的模板错误

Template error with Angular Bootstrap accordion

html

accordion

angularjs

twitter-bootstrap-3