Question

在我的SPA应用程序中，我有一个我需要显示选项卡的视图。我有正确显示标签并能够选择每个标签但由于某种原因未显示与标签关联的html。它们与调用html代码位于同一文件夹中。我错过了什么，因为我真的需要让它发挥作用。

查看 -

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

路由器 -

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

Answer 1

将ng-includes更改为来自Web应用程序根目录的绝对路径。

ng-include="'#/practiceinfo.html'" 应改为 ng-include="'/views/practiceinfo.html'"

Answer 2

类似于here我认为你不需要ng-include中的＃标签，因为你在angular的上下文中。由于URL不正确，Angular可能无法找到文件，所以它什么都没有显示。

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

AngularJS选项卡不显示HTML文件

2 个答案: