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

问题描述

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

这些代码我使用

  // File或Blob命名为mountains.jpgvar file =; //创建文件metadatavar metadata = {contentType：'image / jpeg'}; //将文件和元数据上传到对象' images / mountains.jpg'var uploadTask = storageRef.child（'images /'+ file.name）.put（文件，元数据）; //监听状态变化，错误和upload.uploadTask.on（firebase .storage.TaskEvent.STATE_CHANGED，//或'state_changed'函数（快照）{//获取任务进度，包括上传的字节数和总数n要上传的字节数var progress =（snapshot.bytesTransferred / snapshot.totalBytes）* 100; console.log（'Upload is'+ progress +'％done'）; $ scope.progress =进度; switch（snapshot.state）{case firebase.storage.TaskState.PAUSED：// or'paused'console.log（'Upload is paused'）;打破; case firebase.storage.TaskState.RUNNING：//或'running'console.log（'Upload is running'）;打破; }}，function（error）{switch（error.code）{case'storage / unauthorized'：//用户没有访问对象中断的权限;情况'存储/取消'：/ /用户取消上传中断; ...案例存储/未知：/ /未知错误发生，检查error.serverResponse中断;现在我们可以得到下载URL var downloadURL = uploadTask.snapshot.downloadURL;}）;  

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

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;
});

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.

--AngularJS Developer Guide v1.1 - Concepts - Runtime

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