回调中的 $rootScope 无法正常工作

Question

我有一个简单的 Firebase 应用。对于 firebase 数据库，我保存了一些数据，保存后我想向用户显示警报 window，响应为 "everythig is great" 或 "bad"。对于警报 window，我使用 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 的设置值，但是 alert 不起作用，所以我在 html 页面中绑定了这个 2 值，我发现我第一次按下按钮没有工作，但第二个是工作等等 In jsbin example I make this situation。在这种情况下我哪里错了？

Answer 1

由于 firebase 是 angular 的第三方，$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();
});

回调中的 $rootScope 无法正常工作

$rootScope in callback is not working correctly

angularjs

firebase

angular-ui-bootstrap

firebase-realtime-database