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

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通过提供自己的事件处理循环来修改常规JavaScript流。这将JavaScript分为经典和Angular执行上下文。只有在Angular执行上下文中应用的操作才能受益于Angular数据绑定，异常处理，属性监视等。您可以使用$
apply（）
从JavaScript输入Angular执行上下文。

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

有关更多信息，请参见

• AngularJS开发人员指南-与浏览器事件循环集成