javascript - ng-if 消除了 Material Design lite 涟漪效应

Question

我有以下代码
在此处输入代码 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 数据库:

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

我想要这个导航栏做的是显示 ManageUsers和ManagePermissions如果对应permissionLevel将该权限设置为 true 。因此，如果您是管理员，它将显示两者，如果您是默认值，它将不会显示任何内容。我所设置的内容完美地工作并根据他们的 Angular 色显示。唯一的问题是ng-if单击时不显示波纹效果。仅当 ng-if 时才会发生这种情况正在检查从 firebase 数据库中获取的内容，如果我将其设置为硬编码的值(例如 $scope.testVar = true )，它将正常工作并且链式 react 有效。正如我已经检查过的那样，这不是检索数据的问题。其他按钮(设置和注销)似乎工作正常，并且没有 ng-if 。我做错了什么？任何帮助是极大的赞赏。

Answer 1

当元素动态添加到 DOM 中时，需要通过 MDL 的 componentHandler 对其进行升级，然后才能启用波纹效果等功能。

有一个答案here这就解释了这个问题。

基本上，如果您在从 Firebase 检索信息并更新 DOM 后调用 componentHandler.upgradeAllRegistered();(即，ng-if评估)您应该看到启用了链式 react 。