Angular.js - 将$ scope传递给jQuery函数

Question

我通过Angular.js使用jQuery File Uploader.我需要将服务器的响应从图像上传传递到Angular $ scope,但是我无法访问done函数中的$ scope :

   function LandmarkNewCtrl($location, $scope, db) {
      $('#fileupload').fileupload({
         url: '/api/upload',
         dataType: 'text',
         done: function (e, data) {

            $scope.landmark.avatar = data.result;

         }
      });
  }

获取"未捕获的TypeError:无法读取未定义的"属性'标志'错误.

如何将$ scope传递给done: function()？

Answer 1

您不能在角度控制器中访问HTML.您应该使用指令来执行您想要的操作:

angular.module('yourModule').directive('fileupload', function() {
  return function($scope, $element) {
    $element.fileupload({
      url: '/api/upload',
      dataType: 'text',
      done: function (e, data) {

        $scope.landmark.avatar = data.result;
        $scope.$apply();
      }
    });
  }
}); 

完成的函数由jQuery触发,因此你需要执行$ sope.$ apply(),强制angular来刷新范围绑定.

然后在模板中使用此指令:

<div ng-app="yourModule">
    <div fileupload>Fileupload</div>
</div>

有关包装jQuery组件的更多信息:使用AngularJS和指令的初学者问题 - 包装jQuery组件