Material Design Lite - animation not work inside ng-view div

Question

Do you know why the first button animation does not working, after refresh the page? After click the first button we can only see the button shadow but animation not working. Thank u in advance.

<!doctype html>

</div>
<button class="mdl-button mdl-js-ripple-effect mdl-js-button mdl-button--fab mdl-color--accent">
    <i class="material-icons mdl-color-text--white" role="presentation">add</i>
</button>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-route.min.js"></script>
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.2/material.min.js"></script>
<script src="app.js"></script>

<button class="mdl-button mdl-js-ripple-effect mdl-js-button mdl-button--fab mdl-color--accent">
<i class="material-icons mdl-color-text--white" role="presentation">add</i>

var shaApp = angular.module('shaApp', ['ngAnimate','ngRoute']);
shaApp.config(['$routeProvider',
function($routeProvider) {
    $routeProvider.
    when('/', {
        templateUrl: 'dashboard.html',
        controller: 'dashboardCtrl',
    }).
    otherwise({
        redirectTo: '/'
    });
   }
]);
shaApp.controller('dashboardCtrl', ['$scope', '$http', function($scope, $http) {}}]);

score 8 · Answer 1 · edited Sep 02 '15 at 13:30

8

You might need to upgrade the dynamic elements (as referenced here).

shaApp.run(function($rootScope, $location, $timeout) {
    $rootScope.$on('$viewContentLoaded', function() {
        $timeout(function() {
            componentHandler.upgradeAllRegistered();
        });
    });
});

*[edit] fix misspelled word

edited Sep 02 '15 at 13:30

Yun-Chih Chen

543
6
18

answered Aug 04 '15 at 21:06

Fumler

465
6
15

1

Using routes, when a view are loaded the components registered using componentHandler does not working. This code solve my problem with AngularJS, Material Design Lite and Routes. Thanks! – Richard Aug 19 '15 at 16:23
Great!! Thanks Fumler – Jiho Heo Mar 01 '16 at 15:23
Thank you loads! this saved the day. – Gayan Pathirage Apr 13 '17 at 02:45

Material Design Lite - animation not work inside ng-view div

1 Answers1