如何将数据从第三方库回调(firebase)传递到 AngularJS 中的视图 [英] How to Pass data from Third-Party Library Callback (firebase) to View in AngularJS

问题描述

我正在使用 angularjs 和 firebase 上传文件我正在尝试从控制器传递参数以查看 state_changed 事件它不起作用，我可以在控制器上打印它，但不能在视图中使用它

我使用的这些代码

//名为mountain.jpg的文件或Blobvar 文件 = "";//创建文件元数据变量元数据 = {内容类型:'图像/jpeg'};//上传文件和元数据到对象'images/mountains.jpg'var uploadTask = storageRef.child('images/' + file.name).put(file, metadata);//监听状态变化、错误和上传完成.uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED,//或 'state_changed'功能(快照){//获取任务进度，包括上传的字节数和要上传的总字节数var 进度 = (snapshot.bytesTransferred/snapshot.totalBytes) * 100;console.log('上传完成 ' + 进度 + '% 完成');$scope.progress = 进度；开关(快照状态){case firebase.storage.TaskState.PAUSED://或暂停"console.log('上传暂停');休息;case firebase.storage.TaskState.RUNNING://或正在运行"console.log('上传正在运行');休息;}}, 函数(错误){开关(错误代码){案例存储/未经授权"://用户无权访问该对象休息;案例存储/取消"://用户取消上传休息;...案例存储/未知"://发生未知错误，检查 error.serverResponse休息;}}， 功能() {//上传成功，现在我们可以获取下载地址var downloadURL = uploadTask.snapshot.downloadURL;});

<pre>{{progress}}</pre>

解决方案

因为 firebase 事件发生在 AngularJS 框架之外，所以更改 $scope 需要使用

I'm working on upload files using angularjs and firebase I'm trying pass parameters from controller to view inside state_changed event It's not working , I can print it on controller but can't use it into view

these code that I used

// File or Blob named mountains.jpg
var file = "";

// Create the file metadata
var metadata = {
  contentType: 'image/jpeg'
};

// Upload file and metadata to the object 'images/mountains.jpg'
var uploadTask = storageRef.child('images/' + file.name).put(file, metadata);

// Listen for state changes, errors, and completion of the upload.
uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED, // or 'state_changed'
  function(snapshot) {
    // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
    var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
    console.log('Upload is ' + progress + '% done');
    $scope.progress = progress;
    switch (snapshot.state) {
      case firebase.storage.TaskState.PAUSED: // or 'paused'
        console.log('Upload is paused');
        break;
      case firebase.storage.TaskState.RUNNING: // or 'running'
        console.log('Upload is running');
        break;
    }
  }, function(error) {
  switch (error.code) {
    case 'storage/unauthorized':
      // User doesn't have permission to access the object
      break;

    case 'storage/canceled':
      // User canceled the upload
      break;

    ...

    case 'storage/unknown':
      // Unknown error occurred, inspect error.serverResponse
      break;
  }
}, function() {
  // Upload completed successfully, now we can get the download URL
  var downloadURL = uploadTask.snapshot.downloadURL;
});

<pre>{{progress}}</pre>

解决方案

Because the firebase event happens outside the AngularJS framework, changes to $scope need to use $scope.$apply()

$scope.$apply(function() {
    $scope.progress = progress;
});

From the Docs:

Angular modifies the normal JavaScript flow by providing its own event processing loop. This splits the JavaScript into classical and Angular execution context. Only operations which are applied in Angular execution context will benefit from Angular data-binding, exception handling, property watching, etc... You use $apply() to enter Angular execution context from JavaScript.

Keep in mind that in most places (controllers, services) $apply has already been called for you by the directive which is handling the event. An explicit call to $apply is needed only when implementing custom event callbacks, or when working with third-party library callbacks.

For more information, see

• AngularJS Developer Guide - Integration with the browser event loop

这篇关于如何将数据从第三方库回调(firebase)传递到 AngularJS 中的视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！