bootstrap.ui 选项卡没有标题和内容答案

【问题标题】：No title & content with bootstrap.ui tabsbootstrap.ui 选项卡没有标题和内容
【发布时间】：2014-01-10 23:07:06
【问题描述】：

我尝试使用Angular bootstrap.ui Tabs 制作标签。静态选项卡有效，但动态选项卡不显示标题和内容。在我的代码下面：

我的 JS：

(function (angular) {
  angular.module('numeter', ['ui.bootstrap']).
    controller('configurationMainTabCtrl', ['$scope', '$http', function ($scope, $http) {
      $scope.maintabs = [
        { title:"Users", content:"Test", url:"/user" },
        { title:"View", content:"", url:"/view" },
      ];
    }]);
}(angular));

我的 HTML：

...
<div ng-controller="configurationMainTabCtrl">
 <tabset maintabs>
  <tab ng-repeat="maintab in maintabs">
   <tab-heading>{{maintab.title}}</tab-heading>
   {{maintab.content}}
  </tab>
 </tabset>
</div>
...

这段代码向我展示了可以选择包含空内容的空选项卡。

【问题讨论】：

标签： javascript angularjs twitter-bootstrap angular-ui-bootstrap

【解决方案1】：

由于您没有包含所有代码，我不确定这是否是问题所在，但将来如果您链接到 plunker 或 fiddle 会非常有帮助。这样，我们可以看到正在运行的代码，并且使用解决方案也更容易分叉。（此外，我发现 plunkers 可以很方便地将事情范围缩小到我正在处理的确切代码，这有助于我进行故障排除。）

这是您的代码，已编辑：http://plnkr.co/edit/u80OhmN7YqYRytFE7kG5?p=preview

在使用您的设置时，我遇到的唯一错误是它无法将您的控制器视为一个函数，这意味着它无法在 ng-app 上运行。一旦我将 ng-app="app" 添加到 body 标签，一切都开始工作了。由于我只有您发布的代码，我不确定，但这可能是一个问题。

另一个可能的罪魁祸首可能是这两行：

<tabset maintabs>
    <tab ng-repeat="maintab in maintabs">

把它们改成这样：

<tabset>
    <div ng-repeat="maintab in maintabs">

然后事情应该是正常的。否则，您在 tab 指令上有 ng-repeat，当指令要求每个选项卡只有一个选项卡时。我的意思是，将部分放在 ng-repeat 中，而不是放在它旁边。

【讨论】：

我已经做了一个 Plunker，但它可以工作......谢谢你的建议。
那么它在 plunker 中是否可以工作，但在您的完整应用程序中却不能？编辑了我的答案以突出显示两条关键线。
是的，它可以在 plunker 中使用，如果没有 <tabset maintabs>，它在我的应用中无法使用。
你能编辑你原来的问题并添加一个链接到那个 plunker 吗？

【解决方案2】：

不确定它是否与您的情况有关，但我在不同的情况下遇到了同样的问题。如果您像 <div ng-include="'mytemplate'" ng-controller="MyCtrl"></div> 一样使用 ng-include，那么在 1.1.6 和 1.2.2 之间的某个位置有一个作用域 problem，这可能解释了您可能看不到 maintabs 的原因。

【讨论】：

感谢您向我展示这个问题，但问题来自糟糕的 Angular/Django 用例。

【解决方案3】：

感谢您的所有回复。
这是一个菜鸟的错误。我使用 Django，{{...}} 由 Django 模板系统评估。我添加{% verbatim %} 标签来转义角度部分，它可以工作。

【讨论】：

您可以使用 $interpolateProvider.startSymbol("{[").endSymbol("]}");或任何你喜欢的符号。