javascript - Angular 名称不刷新

Question

授权控制:

.controller('AuthCtrl', function(Users, Auth, $state) {
var authCtrl = this;

authCtrl.user = {
  name: '',
  email: '',
  password: ''
};

authCtrl.login = function() {
  Auth.$authWithPassword(authCtrl.user).then(function(auth) {
    $state.go('home');
    console.log('Logged in');
  }, function(error) {
    authCtrl.error = error;
  });
};

authCtrl.register = function() {
  Auth.$createUser(authCtrl.user).then(function(user) {
    Auth.$authWithPassword(authCtrl.user).then(function(authData) {
      Users.saveUser({
        uid: authData.uid,
        name: authCtrl.user.name,
        mail: authData.password.email
      });
      console.log('Registered');
      $state.go('home');
    });
  }, function(error) {
    authCtrl.error = error;
  });
};
});

路由器:

.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
      .state('login', {
        url: '/login',
        controller: 'AuthCtrl as authCtrl',
        templateUrl: 'auth/login.html'
      })
      .state('register', {
        url: '/register',
        controller: 'AuthCtrl as authCtrl',
        templateUrl: 'auth/register.html'
      })

引起麻烦的 HTML:

<li ng-show="homeCtrl.isLoggedIn()" ng-class="{active: homeCtrl.isSelected(5)}">
  <a href ng-click="homeCtrl.selectTab(5, 'profile')">{{ homeCtrl.getUserName(homeCtrl.currentUser.uid) }}</a>
</li>

Home Ctrl 与用户的方法基本相同:

homeCtrl.getUserName = Users.getUserName;

getUserName: function(uid) {
    if (users.$getRecord(uid)) {
      return users.$getRecord(uid).name;
    }
  },

您好，我正在使用 Firebase + Angular 来创建我自己的应用程序。问题如下:当我注册(或登录)时，我的用户名没有在页面上自动刷新，我必须手动重新加载它。我想这是关于解决注册和登录状态的 promise ，但我不知道要添加什么。谁能帮我解决这个问题，我被困住了。

另一件事 - 用户名出现需要几秒钟，它不会立即发生。猜想是关于表达式中的函数调用，但我不知道如何重构它。

如有任何帮助，我们将不胜感激!

Answer 1

我在创建 Angular + Firebase 应用程序时遇到了类似的问题。我最终实现的解决方案是在用户成功通过身份验证后让我的身份验证服务广播身份验证登录更改:

//In auth service
$rootScope.$broadcast('auth-userLoginChange');

并且我为我的菜单编写了一个自定义指令(根据身份验证状态显示用户名或“登录”)，它监听身份验证登录更改并相应地更新菜单:

//In menu directive   
//Listen to login/logout changes, update menu.
scope.$on('auth-userLoginChange', scope.setLoginMenu);

此解决方案帮助我无需重新加载应用程序即可查看菜单更改，并且能够在成功登录后使用用户名轻松更新我的菜单。