Javascript 如何在angularjs中将此函数放入指令中

这是函数代码，我想把它放在指令中

function previewFile() {
  var preview = document.querySelector('img');
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();

  reader.onloadend = function () {
    preview.src = reader.result;
  }
  if (file) {
    reader.readAsDataURL(file);
  } else {
    preview.src = "";
  }
}

这是用javaScript编写的。下面是html代码

<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">

实际上我想上传一张图片并预览它。

app.directive（'uploader'，function（）{
app.directive('uploader',function(){
    return {
        scope : {country:'='},
        template: '<input type="file" onchange="previewFile()"><br><img src="" height="200" alt="Image preview...">',
        link : function(scope,element,attrs) {
            scope.previewFile = function() {
                var preview = document.querySelector('img');
                var file    = document.querySelector('input[type=file]').files[0];
                var reader  = new FileReader();

                reader.onloadend = function () {
                     preview.src = reader.result;
                }
                if (file) {
                   reader.readAsDataURL(file);
                } else {
                   preview.src = "";
                }
           }
      }
   }
});

返回{
作用域：{country:'='}，
模板：“
”，
链接：函数（范围、元素、属性）{
scope.previewFile=函数（）{
var preview=document.querySelector（'img'）；
var file=document.querySelector（'input[type=file]'）。files[0]；
var reader=new FileReader（）；
reader.onloadend=函数（）{
preview.src=reader.result；
}
如果（文件）{
reader.readAsDataURL（文件）；
}否则{
preview.src=“”；
}
}
}
}
});

app.directive（'uploader'，function（）{
返回{
作用域：{country:'='}，
模板：“
”，
链接：函数（范围、元素、属性）{
scope.previewFile=函数（）{
var preview=document.querySelector（'img'）；
var file=document.querySelector（'input[type=file]'）。files[0]；
var reader=new FileReader（）；
reader.onloadend=函数（）{
preview.src=reader.result；
}
如果（文件）{
reader.readAsDataURL（文件）；
}否则{
preview.src=“”；
}
}
}
}
});

Javascript

app.directive("fileRead", [function () {
  return {
      scope: {
          fileRead: "="
      },
      link: function (scope, element, attributes) {
          element.bind("change", function (changeEvent) {
                var reader = new FileReader();
                reader.onload = function (loadEvent) {
                  scope.$apply(function () {
                      scope.fileRead = loadEvent.target.result;
                  });
              }
              reader.readAsDataURL(changeEvent.target.files[0]);
          });
      }
  }
}]);

HTML

   <input type="file" file-read="myFile" ><br>
   <img src="{{myFile}}" height="200" alt="Image preview...">

您将在作用域的myFile变量中拥有img，您可以随意使用它（在img中预览、在画布中预览、将其保存到db、编写文件等）

---

Javascript

app.directive("fileRead", [function () {
  return {
      scope: {
          fileRead: "="
      },
      link: function (scope, element, attributes) {
          element.bind("change", function (changeEvent) {
                var reader = new FileReader();
                reader.onload = function (loadEvent) {
                  scope.$apply(function () {
                      scope.fileRead = loadEvent.target.result;
                  });
              }
              reader.readAsDataURL(changeEvent.target.files[0]);
          });
      }
  }
}]);

HTML

   <input type="file" file-read="myFile" ><br>
   <img src="{{myFile}}" height="200" alt="Image preview...">

您将在作用域的myFile变量中拥有img，您可以随意使用它（在img中预览、在画布中预览、将其保存到db、编写文件等）

.directive（'ngPreviewer'，函数（$http）{
返回{
限制：'E'，
作用域：'='，
链接：函数（范围、元素、属性）{
scope.previewFile=函数（）{
var preview=document.querySelector（'img'）；
var file=document.querySelector（'input[type=file]'）。files[0]；
var reader=new FileReader（）；
reader.onloadend=函数（）{
preview.src=reader.result；
}
如果（文件）{
reader.readAsDataURL（文件）；
}否则{
preview.src=“”；
}
};
},
模板：“
”
};
});

然后在代码中，像这样引用它，使其神奇地出现：

<ng-Previewer></ng-Previewer>

希望这有帮助：）

.directive（'ngPreviewer'，函数（$http）{
返回{
限制：'E'，
作用域：'='，
链接：函数（范围、元素、属性）{
scope.previewFile=函数（）{
var preview=document.querySelector（'img'）；
var file=document.querySelector（'input[type=file]'）。files[0]；
var reader=new FileReader（）；
reader.onloadend=函数（）{
preview.src=reader.result；
}
如果（文件）{
reader.readAsDataURL（文件）；
}否则{
preview.src=“”；
}
};
},
模板：“
”
};
});

然后在代码中，像这样引用它，使其神奇地出现：

<ng-Previewer></ng-Previewer>

---

希望这有帮助：）

您应该能够将其用作：

。您可以看看这一点，看看将来如何将任何普通Javascript封装到指令中，但您必须考虑如何将其多次使用，而不是仅使用一次：

var-app=angular.module（“MyApp”，[]）；
app.directive（“imagePreview”、[“$timeout”、函数（$timeout）{
返回{
限制：“E”，
模板：“
”，
链接：功能（范围、元素）{
元素。查找（“输入”）。打开（“更改”，函数（）{
var file=this.files[0]；
var reader=new FileReader（）；
reader.onloadend=函数（）{
$timeout（函数（）{
scope.src=reader.result；
});
}
如果（文件）{
reader.readAsDataURL（文件）；
}否则{
scope.src=“”；
}
});
}
};
}]);
您应该能够将其用作：
。您可以看看这一点，看看将来如何将任何普通Javascript封装到指令中，但您必须考虑如何将其多次使用，而不是仅使用一次：


var-app=angular.module（“MyApp”，[]）；
app.directive（“imagePreview”、[“$timeout”、函数（$timeout）{
返回{
限制：“E”，
模板：“
”，
链接：功能（范围、元素）{
元素。查找（“输入”）。打开（“更改”，函数（）{
var file=this.files[0]；
var reader=new FileReader（）；
reader.onloadend=函数（）{
$timeout（函数（）{
scope.src=reader.result；
});
}
如果（文件）{
reader.readAsDataURL（文件）；
}否则{
scope.src=“”；
}
});
}
};
}]);