ng-wenn Material entfernt Design lite Kräuselungeffekt

Question

Ich habe den folgenden Code
Code eingeben hier 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 Datenbank:

{ 
    "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 
    } 
}; 

Ich möchte, dass diese Navbar ManageUsers und ManagePermissions anzeigt, wenn die entsprechende permissionLevel diese Berechtigung auf true gesetzt hat. Wenn Sie also Admin sind, werden beide angezeigt und wenn Sie Standard sind, werden keine angezeigt. Was ich eingerichtet habe funktioniert einwandfrei und zeigt entsprechend ihrer Rolle. Das einzige Problem ist, dass die ng-if nicht den Welleneffekt bei Klick anzeigt. Dies geschieht nur, wenn ng-if etwas prüft, das aus der Firebase-Datenbank genommen wurde, wenn ich es auf einen Wert festlege, den ich hart codiert habe (wie $scope.testVar = true), wird es gut funktionieren und der Ripple-Effekt funktioniert. Dies ist kein Problem beim Abrufen von Daten, wie ich bereits überprüft habe. Die anderen Tasten (Einstellungen und Abmelden) scheinen perfekt zu funktionieren und sie haben keine ng-if. Was habe ich falsch gemacht? Jede Hilfe wird sehr geschätzt.

Answer 1

Wenn Elemente dynamisch zum DOM hinzugefügt werden, müssen sie durch MDLs componentHandler aktualisiert werden, bevor Funktionen wie die Welleneffekte aktiviert werden. Es gibt eine Antwort here, die das Problem erklärt.

Wenn Sie componentHandler.upgradeAllRegistered(); aufrufen, nachdem die Informationen aus Firebase abgerufen wurden und das DOM aktualisiert wurde (dh die ng-if s werden ausgewertet), sollte der Ripple-Effekt aktiviert sein.