2015-08-26 3 views
1

Итак, я работаю над Ionic HTML5 Hybrid. Я использую Firebase для хранения данных и Auth0 для аутентификации. Все прошло очень гладко, но я ударил немного, что я не могу понять, потому что моя новичка в AngularJS. Кажется, я должен использовать $ apply здесь, но документы довольно запутанны в этом отношении, и я не могу понять это.Смотреть переменную наружу angularJS

У меня есть представление, в котором я хочу, чтобы пользователь мог связать социальные учетные записи auth, которые еще не связаны с их учетной записью. Он работает, проверяя, какие аут-провайдеры находятся в профиле этого пользователя. 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, поэтому после входа пользователя в один из доступных поставщиков и возврата к просмотру кнопка логин с этим провайдером исчезнет из представления.

.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? Благодарю.

+0

заведите plunkar или возиться –

+0

Я не знаю, как я могу создать функциональный plunker/скрипку/codepen в этом случае не включая некоторые детали, я не совсем удобную публикацию здесь с текущие правила безопасности, которые я включил в Auth0. Если неясно, объект auth.profile обновляется за пределами Angular, службой Auth0, и я пытаюсь убедиться, что Angular часы для изменений в этом объекте, поэтому, когда функции, проверяющие auth с услугами ниже (facebookCheck (), twitterCheck() и т. д.) итерации по профилю. Этот объект будет обновлен. – cassiusclay

+0

Почему вы не используете излучатель событий? Вы можете выпустить событие при изменении файла auth.profile, и в вашем контроллере вы можете прослушать его –

ответ

0

Как вы можете видеть здесь, мы выделяем событие, когда профиль изменяется, а затем мы его поймаем на нашем контроллере. Если мы удалим часть ловушки событий, профиль изменится, когда мы нажмем кнопку, но значение $scope.profile не будет обновлено.

Смотрите эту Plunker: Example Plunker

+0

Это работает отлично. Благодаря! У меня возникли проблемы с поиском информации об эмитентах в документах. Не могли бы вы указать мне в правильном направлении, чтобы узнать больше об этом? – cassiusclay

+0

Вы должны искать его в документах области видимости, здесь ссылка на документацию слушателя: https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$on –

+0

Отлично, только то, что мне нужно. Благодаря! – cassiusclay

Смежные вопросы