CODEWITHSUNDEEP
angularjssingle-page-application
Craig
Craig

Reputation: 1225

AngularJS Tabs don't display HTML Files

In my SPA application, I have a view which I need to display tabs. I have the tabs showing up correctly and able to select each but for some reason the html associated with the tabs is not being displayed. They are in the same folder as the calling html code. What am I missing as I really need to get this working.

View -

<div class="view">
    <div class="container">
        <header>
            <h3><span class="glyphicon glyphicon-edit"></span> {{vm.title}} Practice
            </h3>
        </header>
        <div tabset>
            <div tab>
                <span tab-heading>Account Information</span>
                <span tab-content ng-controller="TabCtrl" ng-include="'#/practiceinfo.html'"></span>
            </div>
            <div tab>
                <span tab-heading>Billing Information</span>
                <span tab-content ng-controller="TabCtrl" ng-include="'#/practicebilling.html'"></span>
            </div>
        </div>
    </div>
</div>

Router -

    $routeProvider
       .when('/patients', route.resolve('Patients', 'patients/', 'vm'))
        .when('/patientorders/:customerId', route.resolve('PatientOrders', 'patients/', 'vm'))
        .when('/patientedit/:customerId', route.resolve('PatientEdit', 'patients/', 'vm', true))
        .when('/physicians', route.resolve('Physicians', 'physicians/', 'vm'))
        .when('/physicianorders/:customerId', route.resolve('PhysicianOrders', 'physicians/', 'vm'))
        .when('/physicianedit/:customerId', route.resolve('PhysicianEdit', 'physicians/', 'vm', true))
        .when('/accounts', route.resolve('Accounts', 'accounts/', 'vm'))
        .when('/accountedit/:customerId', route.resolve('AccountEdit', 'accounts/', 'vm', true))
        .when('/practices', route.resolve('Practices', 'practices/', 'vm'))
        .when('/practiceedit/:customerId', route.resolve('PracticeEdit', 'practices/', 'vm', true))
        .when('/practiceinfo/:customerId', route.resolve('PracticeInfo', 'practices/', 'vm', true))
        .when('/practicebilling/:customerId', route.resolve('PracticeBilling', 'practices/', 'vm', true))
        .when('/institutions', route.resolve('Institutions', 'institutions/', 'vm'))
        .when('/institutionedit/:customerId', route.resolve('InstitutionEdit', 'institutions/', 'vm', true))
        .when('/orders', route.resolve('Orders', 'orders/', 'vm'))
        .when('/login', route.resolve('Login', 'accounts/', 'vm'))
        .otherwise({ redirectTo: '/login' });

Upvotes: 1

Views: 484

Answers (2)

Arthur Frankel
Arthur Frankel

Reputation: 4705

Similar to what's here I don't believe you need the hashtag in the ng-include since you are within the context of angular. Angular probably can't find the files due to the incorrect url so it shows nothing.

<div class="view">
    <div class="container">
        <header>
            <h3><span class="glyphicon glyphicon-edit"></span> {{vm.title}} Practice
            </h3>
        </header>
        <div tabset>
            <div tab>
                <span tab-heading>Account Information</span>
                <span tab-content ng-controller="TabCtrl" ng-include="'practiceinfo.html'"></span>
            </div>
            <div tab>
                <span tab-heading>Billing Information</span>
                <span tab-content ng-controller="TabCtrl" ng-include="'practicebilling.html'"></span>
            </div>
        </div>
    </div>
</div>

Upvotes: 0

bluetoft
bluetoft

Reputation: 5443

Change your ng-includes to absolute path from the root of your web application.

ng-include="'#/practiceinfo.html'" should be changed to ng-include="'/views/practiceinfo.html'"

Upvotes: 2

Related Questions