Angularjs 带有角度ui路由器的md选项卡不呈现子对象

我正在使用Angular 1.6.2和Angular Material 1.3，并大量使用组件。我有一个外部“appComponent”，它包装了应用程序的其余部分，并提供了一个带有导航的页眉工具栏、一个页脚，然后在应用程序组件内部的ui视图中加载我的顶级应用程序组件

我的一个组件是客户维护页面，该页面在选项卡1的选项卡中有一个列表，然后在选项卡2的特定于客户的详细信息中有一个列表

选项卡2通过包含多个选项卡的ng include加载另一个模板。其中一些选项卡包含子数据，我想延迟加载它们，因此我为它们创建如下状态：

 .state('customers', {
                url: "/customers",
                templateUrl: "components/customer/index.html",
                role: "customers",
                resolve: { authenticate: authenticate }
            })
            .state('customers.customer', {
                url: "/{customerId}",
                templateUrl: "components/customer/index.html",
                role: "customers - edit",
                view: "customerdetail",
            })
            .state('customers.customer.acknowledgements', {
                url: "/acknowledgements",
                templateUrl: "components/customer/customerAcknowledgements.html",
                view: "customeracknowledgements",
                onEnter: function() {
                    debugger
                }
            })
            .state('customers.customer.importinstructions', {
                url: "/importinstructions",
                templateUrl: "components/customer/customerImportInstructions.html",
                role: "customers - edit",
                view: "customerImportInstructions",
            })
            .state('customers.customer.orderhistory', {
                url: "/orderhistory",
                templateUrl: "components/customer/customerOrderHistory.html",
                // parent resolve is inherited. Not implementing
                view: "customerOrderHistory",
            })

            .state('customers.customer.acknowledgements', {
                url: "/acknowledgements",
                role: "customers - edit",
                views: { "customeracknowledgements": 
                    { templateUrl: "components/customer/customerAcknowledgements.html" } },
            })

html包含ui视图，每个视图都有name参数，如下所示：

        <md-tabs md-dynamic-height class="md-primary" md-no-select-click md-selected="selectedTab">
            <md-tab label="General Info">
                <!-- content removed for the sake of brevity -->
            </md-tab>
            <md-tab>
                <md-tab-label><span ui-sref="customers.customer.acknowledgements">Acknowledgements</span></md-tab-label>
                <md-tab-body>
                    <div ui-view name="customeracknowledgements"></div>
                    <!--<div ui-view></div>-->
                </md-tab-body>
            </md-tab>
            <md-tab layout-fill ui-sref="customers.customer.importinstructions" label="Import Instructions" md-on-select="$ctrl.selectTab('customers.customer.importinstructions')">
                <md-tab-body>
                    <div ui-view name="customerImportInstructions"></div>
                </md-tab-body>
            </md-tab>
            <md-tab label="Order History" ui-sref="customers.customer.orderhistory" md-on-select="$ctrl.selectTab('customers.customer.orderhistory')">
                <md-tab-body>
                    <div ui-view=n ame "customerOrderHistory">
                    </div>
                </md-tab-body>
            </md-tab>
        </md-tabs>

致谢

我试过各种各样的东西。我知道这些状态也在被导航，因为我已经在每个状态的customeracknowledgements状态上使用了oneter函数，它会为每个状态触发。此外，如果我在Chrome developer tools中查看网络选项卡，当我导航到包含选项卡时，会调用XHR来检索每个模板，但任何选项卡上都没有显示任何内容

---

我已经在谷歌上搜索了*#%！从中，阅读并尝试我能找到的一切，但没有任何帮助。任何想法都将不胜感激

我可以通过如下更改视图语法来实现此功能：

 .state('customers', {
                url: "/customers",
                templateUrl: "components/customer/index.html",
                role: "customers",
                resolve: { authenticate: authenticate }
            })
            .state('customers.customer', {
                url: "/{customerId}",
                templateUrl: "components/customer/index.html",
                role: "customers - edit",
                view: "customerdetail",
            })
            .state('customers.customer.acknowledgements', {
                url: "/acknowledgements",
                templateUrl: "components/customer/customerAcknowledgements.html",
                view: "customeracknowledgements",
                onEnter: function() {
                    debugger
                }
            })
            .state('customers.customer.importinstructions', {
                url: "/importinstructions",
                templateUrl: "components/customer/customerImportInstructions.html",
                role: "customers - edit",
                view: "customerImportInstructions",
            })
            .state('customers.customer.orderhistory', {
                url: "/orderhistory",
                templateUrl: "components/customer/customerOrderHistory.html",
                // parent resolve is inherited. Not implementing
                view: "customerOrderHistory",
            })

            .state('customers.customer.acknowledgements', {
                url: "/acknowledgements",
                role: "customers - edit",
                views: { "customeracknowledgements": 
                    { templateUrl: "components/customer/customerAcknowledgements.html" } },
            })

要在选项卡主体中加载模板并保留所有动画效果，最简单的方法是：

            <md-tab label="Acknowledgements" ui-sref="customers.customer.acknowledgements">
                <md-tab-body>
                    <div ui-view name="customeracknowledgements"></div>
                </md-tab-body>
            </md-tab>