加载时间长

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剂量识别ng模型…在我上面的代码中，底部的那些也首先被记录，然后其他的都在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（）内部的代码。

编辑3

好吧，坦白。在开始之前，我只是删除了引号并使之更加简单。

让我们开始讨论$ timeout的问题…

因此，当我为原始的插件（更简单的版本…）测试$ 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甚至无法用于我的更简单版本的插件：

$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：

好的，现在我设法将图像（我向您展示的简单的插头）放在了插头上……这是代码：

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来完成相同的操作。

更新资料

来自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}}"/>

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