Angular UI 选项卡自定义指令存在模板问题

Question

我在单个文件中有以下片段，但出现以下错误：

Template for directive 'uibTabset' must have exactly one root element /my-tabs.html

<script type="text/ng-template" id="/my-tabs.html</script>
                                    ..
                                    
<script type="text/javascript">
        angular.module('checkinapp', ['ngAnimate', 'ui.bootstrap']);
        angular.module('checkinapp').controller('TabsDemoCtrl', function($scope, $window) {
          // or here... $scope.indextab = 1
        });
        </script>
                             
....
<section class="my-tabs" ng-controller="TabsDemoCtrl" ng-init="indextab = 1">
     <uib-tabset active="indextab" template-url="/my-tabs.html">
      <uib-tab index="0" heading="Static title" class="col-xs-4 col-sm-4 col-md-4 col-lg-4">Static First</uib-tab>
      <uib-tab index="1" heading="Static title1" class="col-xs-4 col-sm-4 col-md-4 col-lg-4">Static Second</uib-tab>
      <uib-tab index="2" heading="Static title2" active="true" class="col-xs-4 col-sm-4 col-md-4 col-lg-4">Static Third</uib-tab>
     </uib-tabset>
    </section>

如何解决？

谢谢

Answer 1

改变

<script type="text/ng-template" id="/my-tabs.html</script>
...
<uib-tabset active="indextab" template-url="/my-tabs.html">

至

<script type="text/ng-template" id="my-tabs.html">
   <div>fill your template here</div>
</script>
...
<uib-tabset active="indextab" template-url="my-tabs.html">

Angular UI 选项卡自定义指令存在模板问题

Angular UI tab custom directive has template issues

javascript

angularjs

angular-ui-tabset