AngularJS 1.5：scope.$watch 内部链接函数不会在模型更改时更新答案

【问题标题】：AngularJS 1.5: scope.$watch inside link function doesn't update on model changeAngularJS 1.5：scope.$watch 内部链接函数不会在模型更改时更新
【发布时间】：2016-11-14 22:59:05
【问题描述】：

祝大家早安！

我正在开发一个网络应用，使用typescript和angular 1.5；

我创建了一个指令，它的主要目标是监视用户是否登录，并隐藏/显示相应的元素。

这是链接功能 代码：

interface ShowAuthedScope extends ng.IScope{
  User: UserService,
  _$log: ng.ILogService
}

function ShowAuthedDirective(User:UserService, $log:ng.ILogService) {
  'ngInject';

  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      scope.User = User;
      scope._$log = $log;
      scope.$watch('User.current', function (val) {
        scope._$log.log('updated!:', val);
      })
    }
  }
}

我的案例的模型是当前用户，设置或取消设置取决于他是否登录。

这是 UserService 的剪辑代码：

interface UserInterface {
  current:GoogleUser;
  signIn(options?:SignInOptions):Promise<any>;
  signOut():Promise<void>;
}

class UserService implements UserInterface {
  public current:GoogleUser;
  private _GoogleAuth:GoogleAuthService;
  private _AppConstants;

  constructor(GoogleAuth:GoogleAuthService, AppConstants) {
    'ngInject';
    this._GoogleAuth = GoogleAuth;
    this._AppConstants = AppConstants;
    this.current = null;
  }

  public signIn(options?:SignInOptions) {
    let promise:Promise<any>;
    let _options:SignInOptions = options || {};
    _options.app_package_name = this._AppConstants.appPackageName;
    if (this.current) {
      promise = this.current.signIn(_options);
    } else {
      promise = this._GoogleAuth.signIn(_options);
    }
    promise = promise.then((googleUser:GoogleUser) => this.current = googleUser);
    return promise;
  }


  public signOut() {
    this.current = null;
    return this._GoogleAuth.signOut();
  }

}

$watch里面的函数在初始化后只被触发一次；

另外请注意，我已经尝试将 true 作为 $watch 函数的第三个参数传递

希望得到您的帮助！谢谢！

【问题讨论】：

听起来很可疑。要么在摘要循环之外调用signIn 和signOut，要么不调用它们，或者在同一摘要循环迭代中依次调用它们，这样User.current 就不会改变。
或_GoogleAuth.signIn 解析为null。
基本上我通过控制台测试它：我得到服务实例 - var service = angular.element(document).injector().get('User');然后调用 signIn();和 signOut() 方法，并确保每次电流发生变化。

标签： javascript angularjs typescript angularjs-scope

【解决方案1】：

当您从控制台调用 signIn 和 signOut 时，它发生在称为“摘要循环”的外部。 Angular 在每个摘要循环中运行 $watch 语句，但需要发生一些触发它的事情。

例如ng-click 和所有 Angular 事件处理程序都会自动触发摘要循环，以便可以检测到变量更改。

所以总而言之，如果你想从控制台做所有事情，你需要自己触发摘要循环：

angular.element(document).injector().get('$rootScope').$digest()

【讨论】：

巧妙:) 非常感谢！