Question

现在变得非常非常烦人了......我坚持了很长时间......问题是加载速度变慢了......这是我的代码我将在底部解释它：< / p>

app.controller('chatCtrl', ["$scope", function($scope) {


        var ref = new Firebase('MYFIREBASEAPP')
        $scope.usernameProfile = ''
        $scope.imageProfile = ''


        ref.onAuth(function(authData) {
            ref.child("Users Auth Info").child(authData.uid).on("value", function(snapshot) {
                $scope.usernameProfile = snapshot.val().Username;
                $scope.imageProfile = snapshot.val().Image
                console.log(snapshot.val().Image)
                console.log(snapshot.val())
                console.log($scope.usernameProfile)
                var username = $scope.usernameProfile
                console.log($scope.imageProfile)
            })
        })


        console.log($scope.usernameProfile)
        console.log($scope.imageProfile)

    }])

这里我从用户的数据中获取了usernameProfile和imageProfile ...这里的问题是它加载方式来减慢..当我尝试通过传递将其呈现为html时：

<img id="profileImage" ng-src="{{imageProfile }}"  >

图像变成空白..由于某种原因html dosent识别ng-model ...也在我的代码上面，底部的那些首先被记录，然后是snapshot.val（）中的其他...请帮帮我..谢谢你

修改

试过这个......仍在努力......

   var ref = new Firebase('https://sparke.firebaseio.com/')
    var syncObject = $firebaseObject(ref);

    ref.onAuth(function(authData){
      $scope.profile = $firebaseObject(ref.child('UsersAuthInfo').child(authData.uid).child("Image"));
    $scope.profile.$loaded().then(function() {
        console.log($scope.profile.$value);
        $scope.imageProfile = $scope.profile.$value
        });
    })

修改

这个剂量工作：

ref.onAuth(function(authData) {
             console.log("Good?)
  ref.child("UsersAuthInfo").child(authData.uid).on("value", function(snapshot) {
      $timeout(function() {
      $scope.usernameProfile = snapshot.val().Username;
      $scope.imageProfile = snapshot.val().Image
      console.log(snapshot.val())
    });
  })
})

console.log($scope.usernameProfile)

第一个说Good的那个先执行，然后执行底部然后执行内部.child（）

EDIT3

好的坦率地说。在我开始之前，我刚刚删除了引号并使其变得更简单......

让我们开始解决$ timeout ...

的问题

所以当我测试原始plunker的$ timeout（更简单的版本......）它工作得很好这是代码：

ref.child('Image').on("value", function(snapshot) {
  // tell AngularJS that we're going to make changes to $scope
  $timeout(function(){
    $scope.image = snapshot.val();
    console.log(snapshot.val())
  });
}, function (errorObject) {
  console.log("The read failed: " + errorObject.code);
})

现在有了超时，当我试图将其实现到我原来的应用程序时，由于某种原因它不能正常工作......这是代码...：

ref.onAuth(function(authData){
  ref.child("UsersAuthInfo").child(authData.uid).on("value", function(snapshot) {
    // tell AngularJS that we're going to make changes to $scope
    $timeout(function(){
      $scope.imageProfile = snapshot.val().Image;
      console.log(snapshot.val())
    });
  }, function (errorObject) {
    console.log("The read failed: " + errorObject.code);
  })
})

现在使用$ firebaseObject ...

$ firebaseObject甚至不能用于我的Simpler版本的plunker，就像我输入这段代码一样：

$scope.image = $firebaseObject(ref.child('Image'));

它给了我一张空白的图片...意思是当网址不对时的默认图片...而且我注意到问题就是当我在console.log（）这样的$ scope.image时：

console.log($scope.image)

我得到一个对象......而不是一个值..对象是这样的：

 $$conf: Object
$id: "Image"
$priority: null
$value: "http://png.clipart.me/graphics/thumbs/151/man-avatar-profile-picture-vector_151265384.jpg"
__proto__: Object

任何一种方法都可以获得帮助

编辑4：

好的，所以现在我设法在plunker上获得了Image（我向你展示的简单的plunker）......以下是代码：

var obj = $firebaseObject(ref);
obj.$loaded(
  function(data) {
    $scope.image = data.Image
  },
  function(error) {
    console.error("Error:", error);
  }
);

但是，当我试图在我的实际应用程序上这样做时，我仍在努力工作！这是我在应用程序上的代码......：

ref.onAuth(function(authData){
    var obj = $firebaseObject(ref.child("UsersAuthInfo").child(authData.uid));
    obj.$loaded(
    function(data) {
      $scope.imageProfile = data.Image
      console.log(data.Image)
    },
    function(error) {
      console.error("Error:", error);
    }
  );
})

帮助将不胜感激！

Answer 1

Firebase异步加载数据，这就是您必须附加回调函数的原因：

ref.onAuth(function(authData) {
  ref.child("Users Auth Info").child(authData.uid).on("value", function(snapshot) {
    $scope.usernameProfile = snapshot.val().Username;
    $scope.imageProfile = snapshot.val().Image
  })
})

问题在于，当您的回调执行时，AngularJS不再监听更改。因此，您的console.log语句可能会写出正确的值，新值将绑定到$scope，但AngularJS根本不会更新视图。

通过告诉AngularJS需要在下一个更新周期更新视图，可以解决这个问题：

ref.onAuth(function(authData) {
  ref.child("Users Auth Info").child(authData.uid).on("value", function(snapshot) {
    $timeout(function() {
      $scope.usernameProfile = snapshot.val().Username;
      $scope.imageProfile = snapshot.val().Image
    });
  })
})

或者，您可以使用AngularFire来完成相同的操作。

有关更长的说明和相关问题列表，请参阅Asynchronous access to an array in Firebase

更新

Plunkr的最小代码是：

var ref = new Firebase('https://angularfireauthtut.firebaseio.com/')
  $timeout(function(){
    ref.child('Image').on("value", function(snapshot) {
    console.log(snapshot.val());
    $scope.image = snapshot.val();
  }, function (errorObject) {
    console.log("The read failed: " + errorObject.code);
  })
})

console.log("For some reason this gets logged first?")
console.log($scope.image)

对于下一个问题，请问题中的唯一代码，我们可以更快地到达某个地方。

这里有两个问题，一个在console.log(snapshot.val());的输出中可见：

'http://png.clipart.me/graphics/thumbs/151/man-avatar-profile-picture-vector_151265384.jpg'

看到那边的那些单引号？那些不应该存在，因为你的HTML现在最终会像这样：

<img src="'http://png.clipart.me/graphics/thumbs/151/man-avatar-profile-picture-vector_151265384.jpg''" />

src被双引号和单引号括起来，这意味着它不再是有效的URL。

正确的解决方案是存储没有单引号的图像。但就目前而言，这也有效：

var imgUrl = snapshot.val();
imgUrl = imgUrl.substring(1, imgUrl.length-1);
$scope.image = imgUrl;

第二个问题是您无法提醒AngularJS新图像。您已将$timeout置于错误的级别，它需要位于值回调中：

ref.child('Image').on("value", function(snapshot) {
  // tell AngularJS that we're going to make changes to $scope
  $timeout(function(){
    var imgUrl = snapshot.val();
    imgUrl = imgUrl.substring(1, imgUrl.length-1);
    console.log(imgUrl);
    $scope.image = imgUrl;
  });
}, function (errorObject) {
  console.log("The read failed: " + errorObject.code);
})

此代码段可用并显示您的图片。

修复数据后，Image值不再包含单引号，您可以使用AngularFire摆脱大部分管道：

var ref = new Firebase('https://angularfireauthtut.firebaseio.com/');
$scope.image = $firebaseObject(ref.child('Image'));

我强烈建议您使用该库。但如果你不这样做，请继续阅读$timeout()和AngularFire的摘要循环。只是复制我的工作片段而不了解这些，确保很快再次导致同样令人沮丧的经历。

更新EDIT3

由于您的数据库只包含字符串，因此您需要在HTML中使用它：

<img ng-src="{{image.$value}}"/>

更新了工作plunkr：http://plnkr.co/edit/NlDsxdCqUSboZci6T7ES?p=preview

需要很长时间才能加载

修改

修改

EDIT3

编辑4：

1 个答案:

更新