2016年6月29日(水)

【メモ】AngularJS 1系でControllerAsを使う場合の画像ファイル操作について

AngularJSで画像をアップする前に編集したかったんですけど、
今の組み方だと単純な$scopeでは動作させられないので。

とりあえずディレクティブ定義

  angular.module('myApp')
    .directive('fileModel',function($parse){
      return{
        restrict: 'A',
        link: function (scope, element, attrs) {
          var model = $parse(attrs.fileModel);
          element.bind('change',function(){
            scope.$apply(function(){
              model.assign(scope,element[0].files[0]);
            });
          });
        }
      };
    });

angular.module('myApp')

.directive('fileModel',function($parse){

return{

restrict: 'A',

link: function (scope, element, attrs) {

var model = $parse(attrs.fileModel);

element.bind('change',function(){

scope.$apply(function(){

model.assign(scope,element[0].files[0]);

});

}

};

});

これはテンプレみたいなもんなんで問題ないかと
Viewに関しては、

<form id="post-form" name="postForm" ng-controller="postController as pst">
  <input type="file" file-model="pst.imageFile"/>
  <img ng-if="pst.imageFileSrc" ng-src="{{pst.imageFileSrc}}" style="max-width: 300px"/>
</form>

</form>

本当はこんな風には書いてないんですが一応例として必要そうなとこだけ抜き出しで。

で、コントローラですが、本当はserviceに登録してやる方がいい気もするけど面倒なので。

  angular.module('myApp')
  .controller('postController', ['$scope', function ($scope) {
      var self = this;
      self.imageFile = '';
      self.imageFileSrc = '';
      $scope.$watch( function () {return self.imageFile;}, function () {
        if (!self.imageFile || !self.imageFile.type.match("image.*")) {
          return;
        }
        var reader = new FileReader();
        reader.onload = function () {
          self.imageFileSrc = reader.result;
          $scope.$apply();
        };
        reader.readAsDataURL(self.imageFile);
      });
    }]);

angular.module('myApp')

.controller('postController', ['$scope', function ($scope) {

var self = this;

self.imageFile = '';

self.imageFileSrc = '';

$scope.$watch( function () {return self.imageFile;}, function () {

if (!self.imageFile || !self.imageFile.type.match("image.*")) {

return;

}

var reader = new FileReader();

reader.onload = function () {

self.imageFileSrc = reader.result;

$scope.$apply();

};

reader.readAsDataURL(self.imageFile);

});

}]);

これでinput[type=file]で読み込んだ画像データがIMGタグに表示されます。
元々やってた処理では読み込んだ後canvasで縮小してから表示してるのでFileReader使ってます。

ControllerAsを利用していると$scopeまんまだと使えないのと、
$scope極力使いたくなかった、でも$watch使わないと基本のディレクティブではファイルの操作ができない、
ということでこんな感じの処理になってます。
2.0は使えない環境なもんで。というかまだ使おうと思ってないし。
ControllerAs使わないでやってる方法はあるんですが、使ったやり方の解説がなかったのでメモってことで。