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

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

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;
  };
});

$scope.isLoggedIn = $rootScope.isLoggedIn;

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;
  };
});