Question

我的Firebase中有一个号码，我希望在我的ng-if中获得它。

我尝试了一个快照，我的控制台日志显示了良好的价值，但似乎被ng-if忽略了。

也许我错过了什么......

我的Ng-If：

<div class="item" ng-if="distanceTo(event) < dist ">

我的JS：

userRef.child($scope.currentUser.authResponse.userID)
       .child("settings")
       .child("distance")
       .once('value', function(snap) {

  console.log(snap.val())
  $scope.dist = snap.val()
  console.log($scope.dist)

})

$scope.distanceTo = function(event) { 
  var distance = GreatCircle.distance(event.addressid.geometry.location.H, 
                                      position.longitude, 
                                      position.latitude, 
                                      event.addressid.geometry.location.L ) 
  event.distance = distance 
  distance = distance.toFixed(1) 
  return distance 
};

<div class="item" ng-if="distanceTo(event) < dist ">

Answer 1

问题是Angular不知道您的Firebase侦听器何时更新。您有两种选择：使用$timeout（不推荐），或使用AngularFire（强烈推荐）。

使用$timeout，您可以执行以下操作：

.controller('MyCtrl', function($scope, $timeout) {
  var ref = new Firebase('<my-firebase-app>');
  // get the user
  $scope.currentUser = ref.getUser();
  var userRef = ref.child($scope.currentUser.uid).child("settings/distance");
  userRef.on('value', function(snap) {
    $timeout(function() {
      $scope.dist = snap.val();
    });
  });
});

使用AngularFire，这更容易：

angular.module('app', ['firebase']) // include AngularFire
.controller('MyCtrl', function($scope, $firebaseObject) {
  var ref = new Firebase('<my-firebase-app>');
  $scope.dist = $firebaseObject(ref);
});

Check out the AngularFire quickstart启动并运行并为自己节省大量时间和痛苦：）

Answer 2

假设你的distanceTo函数运行正常（我无法测试，所以我嘲笑它），问题在于$scope.dist没有设置。

检查您console.log中的哪一个正在发生。我怀疑他们没有发生。因此，问题在于

行

userRef.child($scope.currentUser.authResponse.userID).child("settings").child("distance").once('value',

我也注意到你不使用分号。这不是一个好的做法，而且据我所知，可能会导致这个问题。

＆＃13;

var myApp = angular.module('myApp', []);

myApp.controller('myController', ['$scope',
  function($scope) {

    $scope.distanceTo = function(event) {
      return 10;
      var distance = GreatCircle.distance(event.addressid.geometry.location.H, position.longitude, position.latitude, event.addressid.geometry.location.L);
      event.distance = distance;
      distance = distance.toFixed(1);
      return distance;
    };



    /*    userRef.child($scope.currentUser.authResponse.userID).child("settings").child("distance").once('value', function(snap) {

          console.log(snap.val())
          $scope.dist = snap.val()
          console.log($scope.dist)

        });
    */
  }
]);

＆＃13;

.item {
  height: 50px;
  width: 50px;
  background-color: green;
}
input {
  width: 300px;
}

＆＃13;

<html ng-app="myApp" ng-controller="myController" ng-init="dist = 10">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>

<body>

  <input type=text ng-model="dist" placeholder="values > 10 will make the item show" />
  <div class="item" ng-if="distanceTo(event) < dist ">
</body>

</html>

＆＃13;

Ng-if - 尝试获取Firebase的数据

2 个答案: