コールバックの$ rootScopeが正しく動作していません

Question

私はfirebaseを持つ単純なアプリを持っています。 firebaseデータベースにはいくつかのデータを保存し、保存した後、 "everythig is great"または "bad"というレスポンスで警告ウィンドウを表示したい。 ui-bootstrapを使用している警告ウィンドウ用。 $ rootScopeを使ってアラートを出します。私はいくつかのデータを保存したときに、私は、コールバックを持っている：

<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> 

とコントローラが工場を呼び出します：

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がある

私はrootScopeをするための設定値であることがわかりコンソールで

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

アラートとshowAlertが表示されますが、アラートは機能していないので、この2つの値をhtmlページにバインドして、最初のボタンが機能していないことを確認していますが、2番目は動作しています。In jsbin example I make this situation。私がこの状況で間違っている場所？

Answer 1

firebaseは角度の第三者であるため、$rootScopeは適用されません。

したがって、$rootScopeを手動で適用して機能させる必要があります。

あなたの問題の解決策のひとつです。私はすぐに別の解決策を見つけるつもりです。

にあなたの工場を作ってみましょう、

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(); 
});