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。因此，如果您是管理员，它将显示它们，如果您是默认，它将不显示任何。我所设置的功能完美无缺，并根据其角色进行显示。唯一的问题是ng-if不会对点击产生涟漪效应。这只发生在ng-if正在检查从firebase数据库获取的内容时，如果我将其设置为我已经硬编码的值（例如$scope.testVar = true）它将正常工作并且涟漪效应有效。这不是检查数据的问题，因为我已经检查过了。其他按钮（设置和注销）似乎完美地工作，他们没有ng-if。我做错了什么？任何帮助是极大的赞赏。

Answer 1

当元素动态添加到DOM时，需要在启用涟漪效果等功能之前由MDL componentHandler进行升级。

答案here解释了这个问题。

基本上，如果您在从Firebase检索到信息并且更新了DOM（即评估了componentHandler.upgradeAllRegistered();）之后致电ng-if，您应该会看到启用了涟漪效应。

ng-if删除材料设计精简效果

1 个答案: