Angular UI-Router 无法加载我没有要求的模板

Question

Plunker Code Showing Issue Described Below

http://plnkr.co/edit/Bz3Qhf1eDuFrnKI0qnUo?p=preview

我正在使用 AngularUI 套件的两个组件，即 UI-Router 和 UI-Bootstrap。 UI-Router 负责在用户点击我的顶部导航栏链接时加载模板。

只有“UI Widget Templates”下的前两个链接（AngularUI-Bootstrap 和 Alert）处于活动状态

UI-Bootstrap 负责在模板中制作漂亮的小部件。 我似乎正确配置了 UI-Router，因为我正在加载正确的模板，并且这些模板可以访问正确的控制器。我遇到的问题是我的 UI-Bootstrap 组件无法加载并生成奇怪的错误，这似乎表明他们正在以某种方式尝试自己加载模板？？？ 我在实现中处理不当导致 Bootstrap-UI 指令无法加载？

警报下拉链接的 HTML 模板

<tabset>
  <tab heading="Static title">Static content</tab>
  <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active"           disabled="tab.disabled">
    {{tab.content}}
  </tab>
  <tab select="alertMe()">
  <tab-heading>
    <i class="icon-bell"></i> Select me for alert!
  </tab-heading>
  I've got an HTML heading, and a select callback. Pretty cool!
  </tab>
 </tabset>

{{tabs}}

加载警报模板时来自控制台的错误消息

角度优势

angular.module("uiRouterExample", [
'ui.router',
'ui.bootstrap']).config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: 'templates/home.html',
            controller: 'BSCtrl'
        })
        .state('angularBS', {
            url: '/angularBS',
            templateUrl: 'templates/angularBS.html',
            controller: 'BSCtrl'
        })
        .state('alert', {
            url: '/alert',
            templateUrl: 'templates/alert.html',
            controller: 'BSCtrl'
        })
    ;
})
.controller('BSCtrl', function ($scope) {

    $scope.tabs = [
      { title:"Accordion", content:"Dynamic content 1" },
      { title:"Alert", content:"Dynamic content 2"},
      {title:"Buttons", content:"More Dynamic Content"}
    ];

    $scope.test="Hello World";

    $scope.alerts = [
      { type: 'error', msg: 'Oh snap! Change a few things up and try submitting again.' }, 
      { type: 'success', msg: 'Well done! You successfully read this important alert message.' }
    ];

    $scope.addAlert = function() {
      $scope.alerts.push({msg: "Another alert!"});
    };

    $scope.closeAlert = function(index) {
      $scope.alerts.splice(index, 1);
    };

});

Answer 1

UI-Bootstrap 依赖于 ui-bootstrap-[version].js 文件中不存在的模板的存在。构建文件配置选项在here 中描述。一个相关的sn-p：

名称中带有 -tpls 的文件具有 与指令捆绑在一起的引导特定模板。对于那些 想要接受所有指令并且不需要定制任何东西 解决方案是获取一个名为 ui-bootstrap-tpls-[版本].min.js。另一方面，如果默认 模板不是您需要的，您可以使用 ui-bootstrap-[version].min.js 并提供您自己的模板...

在 plunkr 中，您使用的是 ui-bootstrap-0.7.0.js，而不是 ui-bootstrap-tpls-0.7.0.js。前者没有与模板捆绑在一起，但仍然在指令的 templateUrls 下硬编码了对它们的引用，例如：

.directive('alert', function() {
  return {
    ...
    templateUrl:'template/alert/alert.html',
    ...
  };
}])

---

编辑，包括@inolasco 的回答：

如果你使用了 ui-bootstrap-tpls.js 仍然有这个问题，那可能是你需要添加

'ui.bootstrap.tpls'

到你的模块。

Answer 2

添加到接受的答案，这导致我解决了类似的问题。如果您使用 ui-bootstrap-tpls.js 仍然存在此问题，则可能是您需要添加

'ui.bootstrap.tpls'

到你的模块。这对我有用。