ng-if removes material design lite ripple effect

Question

I have the following code
enter code here HTML:

<nav class="mdl-navigation">
    <a ng-href="{{signInNavBar.Settings.Location}}" ng-class="styles.navBarElements">{{signInNavBar.Settings.Title}}</a>
    <a href="" onclick="location.replace(this.href)" ng-class="styles.navBarElements" ng-click="ButtonSignOut()">Sign Out</a>
    <div class="android-drawer-separator" ng-if="permissionLevels[currentUser.Role].ManagePermissions || permissionLevels[currentUser.Role].ManageUsers"></div>
    <a ng-href="{{signInNavBar.ManagePermissions.Location}}" ng-class="styles.navBarElements" ng-if="permissionLevels[currentUser.Role].ManagePermissions">{{signInNavBar.ManagePermissions.Title}}</a>
    <a ng-href="{{signInNavBar.ManageUsers.Location}}" ng-class="styles.navBarElements" ng-if="permissionLevels[currentUser.Role].ManageUsers">{{signInNavBar.ManageUsers.Title}}</a>
</nav>

Firebase Database:

{
  "permissionLevels" : {
    "Admin" : {
      "ManagePermissions" : true,
      "ManageUsers" : true
    },
    "Default" : {
      "ManagePermissions" : false,
      "ManageUsers" : false
    }
  },
  "users" : {
    "12345" : {
      "Email" : "gm241709@gmail.com",
      "Name" : "Use Char",
      "Role" : "Admin",
      "uid" : "12345"
    }
  }
}

AngularJS:

$scope.styles: {navBarElements: "mdl-navigation__link mdl-button mdl-js-button mdl-js-ripple-effect customNavElement"}
$scope.signInNavBar = {
    Settings: {Title: "Settings", Location: "settings.html"},
    ManageUsers: {Title: "Manage Users", Location: "users.html"},
    ManagePermissions: {Title: "Manage Roles", Location: "permission.html"}
};
$scope.currentUser = {
    // Retrived with firebase.auth().currentUser
    "Email" : "email@gmail.com",
    "Name" : "Name",
    "Role" : "Admin",
    "uid" : "12345"
};
$scope.permissionLevels = {
    // Data from database
    "Admin" : {
      "ManagePermissions" : true,
      "ManageUsers" : true
    },
    "Default" : {
      "ManagePermissions" : false,
      "ManageUsers" : false
    }
};

What I want this navbar to do is to display ManageUsers and ManagePermissions if the corresponding permissionLevel has that permission set to true. So if you are Admin it will display both of them and if you are Default it will not display any. What I have set up works perfectly andd displays according to their Role. The only issue is that the ng-if does not display the ripple effect on click. This only happens when ng-if is checking something that has been taken from firebase database, if I set it to a value that I have hard coded (such as $scope.testVar = true) it will work fine and the ripple effect works. This is not an issue with retrieving data as I have already checked. The other buttons (Settings and Sign Out) seem to work perfectly and they do not have ng-if. What have I done wrong? Any help is greatly appreciated.

score 1 · Answer 1 · edited May 23 '17 at 11:51

When elements are dynamically added to the DOM, they need to upgraded by MDL's componentHandler before functionality like the ripple effects are enabled.

There is an answer here that explains the issue.

Basically, if you call componentHandler.upgradeAllRegistered(); after the information is retrieved from Firebase and the DOM is updated (that is, the ng-ifs are evaluated) you should see the ripple effect enabled.

ng-if removes material design lite ripple effect

1 Answers1