javascript - 在 Angular ui-router 中如何将事件从一个 View 发送到另一个 View ？

Question

用例是在身份验证后将登录按钮更改为文本“logged in as xxx”。

我将我的页面分为 3 个 View :页眉、内容、页脚。 登录 按钮位于标题 View 中。当我点击登录时，它会转换到“app.login”状态，并且内容 View 会更改为允许用户输入用户名和密码。

这是路由代码:

app.config(['$stateProvider', '$urlRouterProvider',
    function($stateProvider, $urlRouterProvider) {
    $stateProvider
    .state('app', {
        url: '/',
        views: {
            'header': {
                templateUrl: 'static/templates/header.html',
                controller: 'AppController'
            },
            'content': {
                templateUrl: 'static/templates/home.html',
                controller: 'HomeController'
            },
            'footer': {
                templateUrl: 'static/templates/footer.html',
            }
        }
    })
    .state('app.login', {
        url: 'login',
        views: {
            'content@': {
                templateUrl : 'static/templates/login.html',
                controller  : 'LoginController'
           }
        }
    })

html模板有这样的代码:

<li><span ng-if='loggedIn' class="navbar-text">
    Signed in as {{currentUser.username}}</span>
</li>

LoginController 在身份验证成功后将 $scope.loggedIn 标志设置为 true，但如何将该标志填充到标题 View ？

据我所知，我不能像上面那样在 html 模板中使用 $scope.loggedIn，因为 $scope 在两个 Controller 中是不同的。我知道如果 LoginController 是 AppController 的子级，那么我可以在 LoginController 中使用事件调用 $scope.$emit 并在 AppController 中调用 $scope.$on 来捕获它.但是在这种情况下，两个 Controller 用于不同的 View ，我怎样才能使它们成为父子？

我知道我可以使用 $rootScope，但正如我所知，污染 $rootScope 是最后的手段，所以我正在努力寻找最佳实践。这一定是一个非常常见的用例，所以我一定遗漏了一些明显的东西。

Answer 1

您可以使用工厂来处理身份验证:

app.factory( 'AuthService', function() {
  var currentUser;

  return {
    login: function() {
      // logic 
    },
    logout: function() {
      // logic 
    },
    isLoggedIn: function() {
      // logic 
    },
    currentUser: function() { 
      return currentUser; 
    }
  };
});

然后可以在您的 Controller 中注入(inject)AuthService。以下代码监视服务值的更改(通过调用指定的函数)，然后同步更改的值:

app.controller( 'AppController', function( $scope, AuthService ) {
  $scope.$watch( AuthService.isLoggedIn, function ( isLoggedIn ) {
    $scope.isLoggedIn = isLoggedIn;
    $scope.currentUser = AuthService.currentUser();
  });
});