1

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' });

2 Answers 2

2

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'"

Sign up to request clarification or add additional context in comments.

2 Comments

not totally sure what the path should be. The files are located in app/webportalapp/views/practices/*.html and have put "/app/webportalApp/view/practices/tab1.html" and it still can't find them.
Thanks to both of you for the help! I was able to get it to work!
0

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>

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.