角度名称不刷新答案

【问题标题】：Angular name doesn't refresh角度名称不刷新
【发布时间】：2016-04-01 13:25:23
【问题描述】：

授权控制：

.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 创建自己的应用。问题如下：当我注册（或登录）时，我的用户名不会在页面上自动刷新，我必须手动重新加载。我想这是关于解决注册和登录状态的承诺，但我不知道要添加什么。谁能帮我解决这个问题，我只是卡住了。

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

任何帮助将不胜感激！

【问题讨论】：

取回用户数据后能否添加$scope.$digest()或$scope.$applyAsync()？它闻起来像 $digest 循环没有运行，因为 angular 不知道变化，即在 angular 之外完成的变化
你是什么意思？

标签： javascript angularjs firebase

【解决方案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);

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

【讨论】：

感谢您的回答，尽管我使用 Firebase 找到了不同的方法：

【解决方案2】：

在homeCtrl 中添加此状态检查可解决此问题。

Auth.$onAuth(function(authData) {
  if (authData) {
    homeCtrl.currentUser = authData;
  }
});

【讨论】：