4

我正在通过 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;

         }
      });
  }

出现“未捕获的类型错误：无法读取未定义的属性‘地标’”错误。

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

4

3 回答 3

5

您不能在角度控制器中访问 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();
      }
    });
  }
});

done 函数由 jQuery 触发，因此您需要执行 $sope.$apply() 来强制 angular 刷新范围绑定。

然后在你的模板中使用这个指令：

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

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

于 2013-07-30T20:30:15.343 回答
4

更建议做类似的事情

angular.element('#fileupload').fileupload({
     url: '/api/upload',
     dataType: 'text',
     done: function (e, data) {

        $scope.landmark.avatar = data.result;

     }
  });

它应该工作

于 2013-07-30T20:12:00.230 回答
0

$scope 在 JQuery 函数中不起作用，尽管它是使用 angular.element 调用的，如 keddour 的回答中所建议的那样。

使用指令来调用函数似乎是有效的答案。

对于那些正在寻找一种在特殊情况下（例如在动态加载的脚本中）使用的更简单方法的人来说，通过全局变量交换数据也可以。这打破了一些惯例——但 Angular 确实还不完美，有时我们不得不求助于奇怪的方法来解决问题。

在全局范围内声明这样的内容。

angularBridge = {};

现在在您的控制器中（我假设它在动态脚本中）：

demoApp.controlProvider.register('demoController', ['$scope', function($scope) {          

 angularBridge.$demoScope = $scope; 

 $scope.landmark.avatar = 0;      

}]);

现在您可以在 Angular 控制器或 JQuery 函数中使用它来交换数据。

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

            angularBridge.$demoScope.landmark.avatar = data.result;

         }
      });
  }
于 2015-09-17T07:08:33.820 回答