I am using Angular 1.6.2 with Angular Material 1.3 and making fairly heavy
use of components. I have an outer "appComponent" that wraps the rest of
the app and provides a header toolbar with navigation, a footer and then my
top-level app components load within a ui-view inside the app component.
One of my components is a customer maintenance page that has a list in a
tab on tab 1 and then customer specific details on tab 2.
tab 2 loads another template via ng-include that includes several tabs. A
few of those tabs contain child data and I want to lazy load them, so I
create states for them like this:
.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",
})
The html inlcudes ui-view with the name argument for each view like so:
<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>
I have tried a wide variety of things. I know that the states are being
navigated too because I've had the onEnter function used on the
customeracknowledgements state on each state and it fires for each one.
Also if I watch the network tab in the Chrome developer tools an XHR call
is made to retrieve each template when I navigate to the containing tab,
but nothing is display on any of the tabs.
I've googled the *#%! out of this, read and tried everything I can find,
but nothing has helped. Any ideas would be appreciated.
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
