Ng-show & ng-hide在项目中使用$rootScope？

ng-show 和 ng-hide 是 AngularJS 中用于控制 DOM 元素显示和隐藏的指令。它们通过绑定一个表达式的值来决定是否显示元素。如果表达式的值为 true，则显示元素；如果为 false，则隐藏元素。

基础概念

ng-show: 当表达式的值为 true 时，元素会被显示。
ng-hide: 当表达式的值为 false 时，元素会被隐藏。

使用 `$rootScope`

在 AngularJS 中，$rootScope 是所有作用域的根作用域。它可以在整个应用中共享数据和方法。使用 $rootScope 可以在不同的控制器之间共享状态，从而控制 ng-show 和 ng-hide 的显示逻辑。

优势

全局状态管理: 使用 $rootScope 可以方便地在不同控制器之间共享状态。
简化代码: 不需要在每个控制器中重复定义相同的状态变量。

类型

布尔值: 直接绑定一个布尔值来控制显示和隐藏。
表达式: 绑定一个表达式，其计算结果为布尔值。

应用场景

用户认证状态: 根据用户是否登录来显示或隐藏某些功能。
模态框控制: 控制模态框的显示和隐藏。
权限管理: 根据用户的权限级别显示不同的菜单或功能。

示例代码

假设我们有一个应用，需要根据用户是否登录来显示或隐藏某些按钮。

HTML

<div ng-app="myApp" ng-controller="MainCtrl">
  <button ng-show="isLoggedIn">Logout</button>
  <button ng-hide="isLoggedIn">Login</button>
</div>

JavaScript

var app = angular.module('myApp', []);

app.run(function($rootScope) {
  // 假设我们在某个地方设置了用户的登录状态
  $rootScope.isLoggedIn = false;
});

app.controller('MainCtrl', function($scope, $rootScope) {
  // 将 $rootScope 中的状态同步到 $scope
  $scope.isLoggedIn = $rootScope.isLoggedIn;

  // 模拟用户登录
  $scope.login = function() {
    $rootScope.isLoggedIn = true;
    $scope.isLoggedIn = $rootScope.isLoggedIn;
  };

  // 模拟用户登出
  $scope.logout = function() {
    $rootScope.isLoggedIn = false;
    $scope.isLoggedIn = $rootScope.isLoggedIn;
  };
});

遇到的问题及解决方法

问题1: 状态不同步

原因: 可能是因为 $rootScope 中的状态没有正确同步到当前控制器的 $scope。

解决方法: 确保在控制器中显式地将 $rootScope 的状态赋值给 $scope。

$scope.isLoggedIn = $rootScope.isLoggedIn;

问题2: 性能问题

原因: 频繁地修改 $rootScope 可能会导致性能问题，因为 $rootScope 的变化会触发整个应用的脏检查。

解决方法: 尽量减少对 $rootScope 的直接修改，可以考虑使用服务或工厂来管理全局状态。

app.factory('AuthService', function() {
  var isLoggedIn = false;
  return {
    isLoggedIn: function() {
      return isLoggedIn;
    },
    login: function() {
      isLoggedIn = true;
    },
    logout: function() {
      isLoggedIn = false;
    }
  };
});

app.controller('MainCtrl', function($scope, AuthService) {
  $scope.isLoggedIn = AuthService.isLoggedIn;

  $scope.login = function() {
    AuthService.login();
    $scope.isLoggedIn = AuthService.isLoggedIn;
  };

  $scope.logout = function() {
    AuthService.logout();
    $scope.isLoggedIn = AuthService.isLoggedIn;
  };
});

通过这种方式，可以更好地管理全局状态，避免直接操作 $rootScope 带来的潜在问题。