I was able to get this working by changing the view syntax like this:
.state('customers.customer.acknowledgements', {
url: "/acknowledgements",
role: "customers - edit",
views: { "customeracknowledgements":
{ templateUrl:
"components/customer/customerAcknowledgements.html" } },
})
and the least verbose way to get the templates to load within the tab
bodies and keep all of the animation effects appears to be:
<md-tab label="Acknowledgements"
ui-sref="customers.customer.acknowledgements">
<md-tab-body>
<div ui-view name="customeracknowledgements"></div>
</md-tab-body>
</md-tab>
On Tuesday, March 14, 2017 at 9:19:23 AM UTC-4, Mike Feltman wrote:
>
> 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 [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
