$ rootScope в обратном вызове работает неправильно

Question

У меня есть простое приложение с firebase. Для базы данных firebase я сохраняю некоторые данные, и после сохранения я хочу показать окно предупреждения пользователю с ответом, что «everythig is great» или «bad». Для окна предупреждения я использую ui-bootstrap. Для предупреждения я использую $ rootScope. Поэтому, когда я сохранил некоторые данные у меня есть обратный вызов:

person.child(someName) 
        .set(personData) 
        .then(function() { 
        $rootScope.alert = {type:'success', msg:'Person is added!'}; 
         $rootScope.showAlert = true; 
        console.log($rootScope.showAlert, $rootScope.alert); 
        }) 
        .catch(function (e) { 
        $rootScope.alert = {type:'danger', msg:e}; 
        $rootScope.showAlert = true; 
        }); 

HTML является:

<div uib-alert 
    ng-class="'alert-' + (alert.type || 'warning')" 
    dismiss-on-timeout="2000" 
    ng-if="showAlert" 
    close="close()">{{alert.msg}} 
</div> 

<button ng-click='press()'>Press</button> 

и контроллер вызывает завод:

$scope.press = function() { 
    fact.setItem({name: 'Josh', age: 20, sex: 'male'}); 
} 

В консоли я вижу, что rootScope это значение настройки для alert и showAlert, но предупреждение не работает, поэтому я привязываю это значение 2 на странице html, и я вижу, что мое первое нажатие кнопки не работает, но второе работает и т. д. In jsbin example I make this situation. Где я ошибаюсь в этой ситуации?

Answer 1

Поскольку firebase является третьим лицом к угловому, $rootScope не применяется.

Итак, вам необходимо вручную применить $rootScope, чтобы заставить его работать.

HEre - это одно из решений вашей проблемы. и я постараюсь найти другое решение для него в ближайшее время.

Попробуйте сделать свой завод, чтобы,

app.factory('fact', ['$firebaseArray', '$rootScope', function($firebaseArray, $rootScope) { 
    var person = firebase.database().ref().child('evil_genius'); 

    return { 

    setItem : function(personData) { 
     var someName = Math.random().toString(36).substring(7); 
       return person.child(someName) 
        .set(personData) 
        .then(function() { 
        $rootScope.alert = {type:'success', msg:'Person is added!'}; 
         $rootScope.showAlert = true; 
        $rootScope.$apply(); 
        console.log($rootScope.showAlert, $rootScope.alert); 
        }) 
        .catch(function (e) { 
        $rootScope.alert = {type:'danger', msg:e}; 
        $rootScope.showAlert = true; 
        }); 
    } 
    } 
}]) 

HERE IS A WORKING DEMO

Answer 2

Попробуйте это:

.then(function() { 
    $rootScope.alert = {type:'success', msg:'Person is added!'}; 
    $rootScope.showAlert = true; 
    $rootScope.$apply(); 
}) 
.catch(function (e) { 
    $rootScope.alert = {type:'danger', msg:e}; 
    $rootScope.showAlert = true; 
    $rootScope.$apply(); 
});