Question

我有以下代码：

angular.module("MyApp", ['textAngular'])
.controller("demoController", function demoController($scope) {
    $scope.content = null;
    firebase.database().ref('pages/home').on('value', function(snapshot) { $scope.content = snapshot.val(); });
    console.log($scope.content);
});

正如您所看到的，我要做的就是在访问firebase数据库的函数中更改控制器范围内的变量，以便存储某个条目的内容。然而，当尝试这个时，变量根本不会改变。我尝试使用＆＃39; window.content＆＃39;以及尝试使用＆＃39; var内容;＆＃39;无济于事。有没有办法允许在函数内全局访问变量？

edit - 当我运行firebase.databse（）。ref fucntion并使用alert（snapshot.val（））;它起作用，信息显示在警报中。

Answer 1

使用$apply()：

$apply()用于从外部执行角度表达式角度框架（例如来自浏览器DOM事件，setTimeout，XHR或第三方库）。

例如：

firebase.database()
  .ref('pages/home')
  .on('value', function(snapshot) {     
    $scope.$apply(function(){
      $scope.content = snapshot.val();
    });
});

Answer 2

Firebase是异步的（即代码的其余部分将在不等待firebase函数运行的情况下运行。将console.log置于on函数中，您将看到scope变量实际上已更改。

Answer 3

这些方法都没有奏效，但我最终解决了这个问题：

var app = angular.module("textAngularDemo", ['textAngular'])
app.controller("demoController", function demoController($scope) {
    firebase.database().ref('pages/home').on('value', function(snapshot) {     
        test($scope, snapshot.val());
    });
    $scope.detectChange = function(){
        setTimeout(function(){
            if ($scope.content)
            {
                console.log ($scope.content);
                }
            }
            else
            {
                $scope.detectChange();
            }
        }, 1);
    }
    function test(scope, variable){
        scope.content = variable;
        $scope.$apply();
    }
    setTimeout(function(){ $scope.detectChange() }, 1);
});

我认为这与承诺的行为方式相同，但我当时并不知道如何实施它们。如果你愿意，可以称之为“伪承诺”。

Answer 4

试试这个

firebase.database().ref('pages/home').on('value', function(snapshot) {     scope.$apply(function(){$scope.content = snapshot.val().content });});

Firebase数据库功能无法修改angularjs中的$ scope变量

4 个答案: