在 angularJS 之外观察变量

Question

所以我正在开发 Ionic HTML5 混合应用程序。我正在使用 Firebase 存储数据和 Auth0 进行身份验证。一切都进行得非常顺利，但我遇到了一些我似乎无法弄清楚的小障碍，因为我对 AngularJS 是新手。看来我应该在这里使用 $apply，但是文档在这方面非常混乱，我无法弄清楚。

我有一个观点，我希望用户能够 link 尚未 link 到他们的帐户的社交身份验证帐户。它通过检查哪些身份验证提供程序在该用户的配置文件中来工作。 HTML 如下：

<ion-view title="Account">
  <ion-content class="has-header padding">
    <button class="button button-block button-positive icon-left icon ion-social-facebook" ng-if="facebookCheck() == false" ng-click="linkFacebook()"> Add Facebook Account</button>
    <button class="button button-block button-calm icon-left icon ion-social-twitter" ng-if="twitterCheck() == false" ng-click="linkTwitter()"> Add Twitter Account</button>
    <button class="button button-block button-dark icon-left icon ion-social-instagram" ng-if="instagramCheck() == false" ng-click="linkInstagram()"> Add Instagram Account</button>
    <br>  
    <button class="button button-assertive button-block" ng-click="logout()">Logout</button>
  </ion-content>
</ion-view>

这是控制器。如果您注销或关闭应用程序并重新打开，这将完全按照我想要的方式工作，但我希望它监视 auth.profile 中的变化，因此在用户登录到一个可用的提供商和 returns在视图中，使用该提供商登录的按钮将从视图中消失。

.controller('AccountCtrl', function($scope, auth, $state, store) {

  $scope.logout = function() {
    auth.signout();
    store.remove('token');
    store.remove('profile');
    store.remove('refreshToken');
    $state.go('login');
  }

  $scope.profile = auth.profile;

  $scope.facebookCheck = function() {
     for (i = 0; i < $scope.profile.identities.length; i++) {
        if (angular.equals($scope.profile.identities[i].provider, "facebook")) {
                     return true;
        }
    }

    return false;
};

   $scope.twitterCheck = function() {
     for (i = 0; i < $scope.profile.identities.length; i++) {
        if (angular.equals($scope.profile.identities[i].provider, "twitter")) {
                     return true;
        }
    }

    return false;
};

   $scope.instagramCheck = function() {
     for (i = 0; i < $scope.profile.identities.length; i++) {
        if (angular.equals($scope.profile.identities[i].provider, "instagram")) {
                     return true;
        }
    }

    return false;
};

  $scope.linkTwitter = function () {
    var lock = new Auth0Lock('ywxuAvQN38sQqiiwYz3CJ3IsPUiEg94x', 'fanzee.auth0.com');

    lock.show({
      dict: {
        signin: {
          title: 'Link another account'
        }
      },
      connections: ['twitter'],
      authParams: {
        access_token: auth.accessToken
      }
    })
};

  $scope.linkFacebook = function () {
    var lock = new Auth0Lock('ywxuAvQN38sQqiiwYz3CJ3IsPUiEg94x', 'fanzee.auth0.com');

    lock.show({
      dict: {
        signin: {
          title: 'Link another account'
        }
      },
      connections: ['facebook'],
      authParams: {
        access_token: auth.accessToken
      }
    })
};

  $scope.linkInstagram = function () {
    var lock = new Auth0Lock('ywxuAvQN38sQqiiwYz3CJ3IsPUiEg94x', 'fanzee.auth0.com');

    lock.show({
      dict: {
        signin: {
          title: 'Link another account'
        }
      },
      connections: ['instagram'],
      authParams: {
        access_token: auth.accessToken
      }
    })
};

我知道很多这可能在服务中，但我正在四处移动以尝试让它正常工作。我应该在这里做什么？如何让 Angular 监视 auth.profile 的变化？谢谢。

Answer 1

正如您在这里看到的，当配置文件更改时，我们会发出一个事件，然后我们会在我们的控制器上捕获它。如果我们去掉事件捕捉器部分，当我们点击按钮时配置文件会改变，但是$scope.profile值不会更新。

看到这个 Plunker：Example Plunker

在 angularJS 之外观察变量

Watch variable outside angularJS

angularjs

ionic

auth0