Question

例如，我有两个不同的控制器：

$scope.photoChanged = function(files) {
  $scope.type = files[0].type.split('/');
  $scope.selectedPhoto = true;
  $scope.accepted_type = /jpeg|png/.test($scope.type);
  if ($scope.accepted_type && files[0].size < 1990000) {
    $scope.files = files;
    var reader = new FileReader();
    reader.onload = function(e) {
      $scope.AvatarUrl = $scope.user.SmallAvatarUrl;
    };
    reader.readAsDataURL(files[0]);
  } else {
    $scope.files = undefined;
  }
  $scope.loadingPhoto = false;
};

和

$scope.photoChanged = function(files) {
  $scope.type = files[0].type.split('/');
  $scope.selectedPhoto = true;
  $scope.accepted_type = /jpeg|png/.test($scope.type);
  if ($scope.accepted_type && files[0].size < 1990000) {
    $scope.files = files;
    var reader = new FileReader();
    reader.onload = function(e) {
      $scope.ArticlePhotoUrl = $scope.user.ArticlePhotoUrl;
    };
    reader.readAsDataURL(files[0]);
  } else {
    $scope.files = undefined;
  }
  $scope.loadingPhoto = false;
};

现在我想重构这段代码......

但我有一个问题：

哪个更好的是把这个逻辑？

在：

主要父级app.js
使用中的控制器

在这种情况下更合适的是什么？然后我将这个图像与图像裁剪一起使用......

Answer 1

您可以将它放在普通的js文件中，并将$ scope作为参数传递给它。

这可以是你的helper.js来放置所有常用的方法。

$scope.photoChanged = function(files) {
  uploadFile($scope,files);
};

var uploadFile = function(scope,files){
scope.type = files[0].type.split('/');
  scope.selectedPhoto = true;
  scope.accepted_type = /jpeg|png/.test(scope.type);
  if (scope.accepted_type && files[0].size < 1990000) {
    scope.files = files;
    var reader = new FileReader();
    reader.onload = function(e) {
      scope.ArticlePhotoUrl = scope.user.ArticlePhotoUrl;
    };
    reader.readAsDataURL(files[0]);
  } else {
    scope.files = undefined;
  }
  scope.loadingPhoto = false;
}

uploadfile方法可以在differnt.js文件中

Answer 2

我发现角度最稳定的模式是将函数模块化为控制器和指令。这样您就可以重复使用它们进行任何图片上传。

这是通过在主应用程序目录中创建一个新文件夹来实现的。因此，在与app.js相同的目录中，您可以创建一个名为image upload的新文件夹。

这种目录结构。

/应用
- app.js
- / imageUpload
  - imageUpload.js
  - imageUpload.html

imageUpload.html将是您的指令，imageUpload.js是您的控制器。

然后您可以在app.js中从您的主控制器初始化中引用它，如此

angular.module('myApp', [ 'ngRoute', 'myApp.imageUpload' ])

有关此示例，您可以查看此github repo以获取有用的tuts教程https://github.com/jay3dec/AngularJS_Firebase_Part1/tree/master/app/view1 实质上它给你带来两个核心好处。

imageUpload的控制器被声明一次，因此可以测试它并且您没有重复的代码。您需要传递的任何特定变量都可以在函数中执行，例如function(image, user, article)
您声明的指令然后可重用且更易于维护。您可以附加高级功能，例如拖放，然后在每次上传图像时简单地引用该指令。

在您的情况下，它将包括ArticlePhotoUrl和AvatarUrl的指令，而不是为每种类型编写两个单独的控制器。

angularJS：哪里更好地放置图片上传逻辑？

2 个答案: