CODEWITHSUNDEEP
angularjsangular-ui-routerangular-material
skjorrface
skjorrface

Reputation: 161

angular material animations and ui-router

I'm using angular-material and ui-router within an angular-meteor project. I managed to successfully use ui-router with angular-material and everything's working except for one thing: if you notice, angular material tabs have a tiny animation making each tab's content slide from left or right when clicking on the tab. Using ui-router this animation is lost. Is there any way to keep it using ui-router? Thanks beforehand.

Upvotes: 1

Views: 1188

Answers (2)

skjorrface
skjorrface

Reputation: 161

Ok I solved this way: it is sufficient avoiding "template" or "templateUrl" inside the router state definition and embed each content inside md-tab itself. Let the router state definition just change the url and everything will work.

Upvotes: 0

rkalita
rkalita

Reputation: 575

First of all you need to use 'ui-sref' attribute with states in your tabs instead of this pastebin.com/x4MJLfBE 'ui-view' to display your templates from the states.

<md-tabs md-selected="selectedIndex" md-border-bottom md-autoselect>
    <md-tab label="Configuration" ui-sref="admin.configurations"></md-tab>
    <md-tab label="Users" ui-sref="admin.users.list"></md-tab>
    <md-tab label="Songs" ui-sref="admin.songs"></md-tab>
</md-tabs>
<div ui-view></div>

ui-sref it's your states

.state('admin.configurations', {
            url: '/configurations',
            templateUrl: 'app/admin/configurations/configurations.tmpl.html',
            controller: 'ConfigurationsController as ctrl',
        })
.state('admin.users.list', {
            url: '/list',
            templateUrl: 'app/admin/users/users.tmpl.html',
            controller: 'UsersListController as ctrl'
        })

Plus your parent state must be abstract. It means that now you in admin state where you have template with your tabs

.state('admin', {
            url: '/admin',
            templateUrl: 'app/admin/admin.tmpl.html',
            controller: 'AdminController as ctrl'
        })

Upvotes: 1

Related Questions