2

我的plunker中有以下内容

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.css" />
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
  <script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.22/angular.js" data-semver="1.2.22"></script>
  <script src="//code.jquery.com/jquery-2.1.1.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap.js"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <p>Hello {{name}}!</p>
  <accordion close-others="false">
    <accordion-group heading="Company" ng-click="toggleOpen()">
      <div class="row" data-ng-repeat="item in companyValues">
        <div class="col-xs-6">

          <input name="companyFilter" type="radio" value="{{item.value}}" id="{{item.name}}-filter-radio" ng-model="userData.companyFilter" ng-change="saveUserPreferences()" />
        </div>
        <div class="col-xs-6 pull-text-left">{{item.name}}</div>
    </accordion-group>
  </accordion>
</body>

</html>

但是，当我尝试运行时，我在 template/accordion/accordion-group.html 上得到了 404。有任何想法吗？

4

2 回答 2

3

您的标记会加载两个不同版本的ui.bootstrap.

  1. $templateCache在 Angular.js 的服务中预加载组件模板的版本。
  2. 如果您想调整控制外观，则没有预加载模板的版本。

由于版本 #2 是第二次加载的，因此似乎所有预加载的模板都不可用。

解决方案：删除该行：

<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap.js"></script>

示例：http ://plnkr.co/edit/JyNu2hggAFt33hTvfoXo?p=preview

于 2014-09-03T12:38:11.240 回答
2

当您使用 angular.ui 时，您还必须在依赖项中包含 angular.ui.tpls，如下所示：

var app = angular.module('myApp', ['ui.bootstrap', 'ui.bootstrap.tpls']);
于 2014-09-02T13:48:00.677 回答