Ui-Bootstrap: Error: [$compile:ctreq]

171 Views Asked by At

I have written a tabset in the body of an html page. However, only a portion show up and the others are presented near the header as list items represented by a bullet point. I know I have everything installed correctly, as on another page I have something very similar. When tampering with the code, I cannot seem to figure it out. In the console log of inspect element, I receive the error "Error: [$compile:ctreq] http://errors.angularjs.org/1.5.5/$compile/ctreq?p0=tabset&p1=tab". Also, in the inspection of the compiled html, I can see the both "missing" tabs as this:

<li class="ng-isolate-scope" ng-class="{active: active, disabled: disabled}"></li>
    <a class="ng-binding" href="" ng-click="select()" tab-heading-transclude="">
      </a>

Here is the code snippet in question:

<tabset id="center"  align="center">
    <tab>
        <tab-heading style="text-align:left">
            <span ng-click="showme=0" style="text-align:left">Tab0</span>
        </tab-heading>
        <% include content0 %>
    </tab>
    <tab>
        <tab-heading>
            <span ng-click="showme=1" style="text-align:left">Tab1</span>
        </tab-heading>
        <!-- end Tab0, Begin Tab1 -->
        <% include content1 %>
    </tab>
    <tab>
        <tab-heading>
            <span ng-click="showme=2" style="text-align:left">Tab2</span>
        </tab-heading>
        <!-- End Tab2, begin Tab3 -->
        <% include content2 %>
    </tab>
    <tab>
        <tab-heading>
            <span ng-click="showme=3" style="text-align:left">Tab3</span>
        </tab-heading>
        <!-- End Tab3, Begin Tab4 --> 
        <% include content3 %>
    </tab>
    <tab>
        <tab-heading>
            <span ng-click="showme=4" style="text-align:left">Tab4</span>
        </tab-heading>
        <!-- End of Tab4, Begin Tab5 -->
        <%include content4%>
    </tab>
    <tab>
        <tab-heading>
            <span ng-click="showme=5" style="text-align:left">Tab5</span>
        </tab-heading>
        <!-- End Tab5, begin Tab6 -->
        <% include content5 %>
    </tab>
</tabset>

EDIT: When removing Tab4, it works. I have analyzed the content of Tab4 and there is nothing illegal. I am still rather stumped.

0

There are 0 best solutions below