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组件的更多信息：Beginner questions with AngularJS and directives - wrapping a jQuery component

Answer 2

更推荐做类似

的事情

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

        $scope.landmark.avatar = data.result;

     }
  });

它应该有用

Answer 3

$ 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;

         }
      });
  }

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

3 个答案: