angularJS: где лучше разместить логику загрузки изображений?

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, вы можете создать новую папку, называемую загрузкой изображения.

Этот вид структуры справочника.

• /приложение
  • app.js
  • /ImageUpload
    • imageUpload.js
    • imageUpload.html

imageUpload.html будет вашей директивой и imageUpload.js вашим контроллером.

Вы можете ссылаться на него вы главный контроллер инициализацию в app.js как так

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

Для примера этого вы можете посмотреть на этой GitHub репо за полезным Татсом учебник https://github.com/jay3dec/AngularJS_Firebase_Part1/tree/master/app/view1 в сущности это дает вам два основных преимущества.

1. Контроллер для imageUpload объявляется один раз, поэтому его можно протестировать, и у вас нет повторного кода. Любой конкретный var, который вам нужно передать вам, может выполняться в функции, например: function(image, user, article)

2. Директива, которую вы объявляете, затем может использоваться повторно и проще в обслуживании. Вы можете подключить к нему дополнительные функции, такие как перетаскивание, а затем просто ссылаться на директиву каждый раз, когда вы загружаете изображение.

В вашем случае это будет в том числе и эту директиву как ArticlePhotoUrl и AvatarUrl вместо написания двух отдельных контроллеров для каждого типа.

надеюсь, что это поможет.