加载时间长

Question

这现在变得非常非常烦人...我坚持了很长时间...问题是加载速度越来越慢..这是我的代码，我将在底部解释:

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...这里的问题是它加载 wayyy 很慢..当我尝试通过传递将其渲染到 html 时：

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

图像变成空白..出于某种原因 html dosent 识别 ng-model...同样在我上面的代码中，底部的代码首先被记录，然后 [=65] 中的其他代码=]().. 请帮助我.. 谢谢

编辑

试过这个...仍然有效...

   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)

第一个说好，首先执行，然后是底部，然后是 .child()

编辑3

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

让我们开始解决 $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 甚至不能用于我的 plunker 的 Simpler 版本，就像我输入此代码时一样：

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

它给了我一张空白图片...意思是 url 不正确时的默认图片...我注意到问题是当我 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 上获得图像（我向您展示的简单 plunker）...这是其代码：

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

但是，当我再次尝试在我的实际应用程序上执行此操作时，我正在处理它，但仍然无法正常工作！！！这是我正在处理的应用程序上的代码...:[=21=]

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)

对于任何下一个问题，请将 that 作为您问题中的唯一代码，我们可以更快地到达某个地方。

这里有两个问题，一个在 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}}"/>

更新的工作插件：http://plnkr.co/edit/NlDsxdCqUSboZci6T7ES?p=preview

加载时间长

Taking long to load

javascript

angularjs

firebase

angularfire

编辑

编辑

编辑3

编辑 4：

更新