如何将数据从第三方库回调（firebase）传递到AngularJS中的View

Question

我正在使用angularjs和firebase处理上传文件 我正在尝试从控制器传递参数以查看state_changed事件 它无法正常工作，我可以在控制器上打印但不能将其用于视图

我使用的这些代码

group_concat_max_len

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

Answer 1

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

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

  

Angular通过提供自己的事件处理循环来修改正常的JavaScript流。这将JavaScript拆分为经典和Angular执行上下文。只有在Angular执行上下文中应用的操作才会受益于Angular数据绑定，异常处理，属性监视等...您可以使用$apply()从JavaScript输入Angular执行上下文。

     

请记住，在大多数地方（控制器，服务）$apply已由处理事件的指令调用。只有在实现自定义事件回调时才需要显式调用$apply，或者在使用第三方库回调时。

     

     

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