如何将数据从第三方库回调 (firebase) 传递到 AngularJS 中的视图

Question

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

我使用的这些代码

// 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>

Answer 1

因为firebase事件发生在AngularJS框架之外，$scope的改动需要使用$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 - Integration with the browser event loop

如何将数据从第三方库回调 (firebase) 传递到 AngularJS 中的视图

How to Pass data from Third-Party Library Callback (firebase) to View in AngularJS

javascript

angularjs

firebase

angularjs-apply