Question

在我的AngularJS中，我有以下代码，我检查是否有当前登录的用户，以便将顶级应用程序菜单文本从登录切换到Logout（如果没有用户登录则登录），反之亦然。当我使用ng-show ng-hide时，应用程序开始变得非常沉重，所以我尝试切换到ng-if，但是顶部菜单上的css效果开始不能在登录/注销选项卡中专门工作。那么请有人请告诉我处理这种情况的最佳方法是什么？感谢

index.html

<div ng-controller="MenuController">
      <li>
          <div ng-if="userLevel() == 1">
              <a href="#/login">Login</a>
          </div>
          <div ng-if="userLevel() == 2">
               <a href="#/logout">Logout</a>
          </div>
      </li>
    </ul>
</div>

控制器：

  controller('MenuController',
    function MenuController($scope, UService){

        $scope.userLevel = function(){                
            var userType = UService.checkULevel(); //This will return either 1, 2,3,4...etc
            return userType;
        };
   });

Answer 1

ng-show和ng-if之间的区别在于ng-show在指定表达式为false值时将display: none应用于元素，而ng-if从DOM中删除节点，基本上等同于jQuery中的.empty。

您可以考虑为您的元素采用的方法，而不是在控制器中使用它，使用指令访问级别，并遵循本文中描述的方法，这非常灵活，允许您使用不同的元素UI取决于用户级别：http://frederiknakstad.com/2013/01/21/authentication-in-single-page-applications-with-angular-js/

当您检查用户级别时应用程序运行缓慢的另一个原因可能是，每次评估时，您的应用程序必须在服务器端执行检查，从而减慢应用程序的速度。它的一种方法是缓存该查询的结果，然后在登录状态不变时使用它。在该阶段，您可以使缓存无效并再次获取用户级别，准备更新UI。

Answer 2

ng-if指令从页面中删除内容，ng-show/ng-hide使用CSS显示属性隐藏内容。

我很确定没有节目比ng更轻 - 如果没有节目不应该使应用程序太重。如果它变得沉重，我认为可能还有其他原因。

Answer 3

如果使用ng-if，则仅在条件为真时才呈现节点

在ng-show ng-hide的情况下，如果条件发生变化，将显示/隐藏

，将根据条件显示/隐藏节点。

Answer 4

当你使用ng-if时，它只会渲染满足条件的代码。

虽然ng-show ng-hide将在页面上呈现代码，但会在CSS属性的帮助下隐藏。

最好使用ng-if来减少要在页面上呈现的代码行。

AngularJS使用ng-if vs ng-show

4 个答案: