Formulir tidak menjadi jelas setelah mengunggah file.

  <div class="aboutFile">
     <input type="file" name="file" fileread="vm.file" class="form-control" ng-model="vm.file">
        <div class="create-component--perma-bg">
            <i class="fa fa-plus-square-o" aria-hidden="true"></i>
            <span ng-if="!vm.file.name">Add File </span>
            <span ng-if="vm.file.name">{{vm.file.name}}</span>
        </div>
          <button type="button" class="btn btn-info bgChangeBtnInfo" ng-
           click="vm.upload(vm.file)" ng-disabled="!vm.file"> Upload</button>
       </div>

vm.upload metode dipanggil.

    vm.upload = (fileObj) =>{
        vm.call("saveSlideFile", vm.slideObject, (error, result) => {
          if (!error) {
           vm.file={};
           console.log('File saved successfully');
          }
       })
  }

fileread direktif

angular.module('livePoll')
    .directive("fileread", [function () {
        return {
            scope: {
                fileread: "="
            },
            link: function(scope,element, attributes){
                $('.button-collapse').sideNav();
                element.bind("change", function (event) {
                    scope.$apply(function () {
                        scope.fileread = event.target.files[0];
                        scope.$parent.fileread = scope.fileread;
                    });
                })
            }};
    }]
-1
Dheeraj Balodia 10 Agustus 2017, 12:26

2 jawaban

Jawaban Terbaik

Saya menyelesaikan masalah ini hanya dengan satu baris kode dengan bantuan situs web Tech yang luar biasa yaitu Technoalerts. Terima kasih teman-teman atas bantuannya dan saya akan membagikan info ini kepada Anda semua.

Cukup ikuti langkah-langkah yang disebutkan di bawah ini:-

Dalam formulir input, kita harus menetapkan id.

 <input type="file" name="file" fileread="vm.file" class="form-control" id="inputFile" ng-model="vm.file">

Di mana metode vm.upload ini dipanggil, saya menggunakan $('#inputFile').val(''); untuk mengosongkan bidang formulir setelah melakukan tindakan apa pun.

vm.upload

 vm.upload = (fileObj) =>{
    vm.call("saveSlideFile", vm.slideObject, (error, result) => {
      if (!error) {
       $('#inputFile')
       vm.file={};
       console.log('File saved successfully');
      }
   })
}
0
Dheeraj Balodia 18 September 2017, 07:15

1) Hindari menggunakan scope.$parent.fileread = scope.fileread; kode bau ini, tidak masuk akal karena Anda menggunakan pengikatan = dan dapat menyebabkan perilaku yang tidak terduga.

2) Jika Anda menggunakan ngModel, Anda dapat menghindari penggunaan binding dalam arahan Anda dan menggunakan NgModelController.$setViewValue untuk memperbarui nilai tampilan seperti:

function onChange (event) {
  //update bindings in $apply block
  $scope.$apply(function(){
    ngModel.$setViewValue(event.target.files[0]);
  });
}
//change event handler
element.on('change', onChange); 

3) Anda dapat menyiapkan $watch pada NgModelController.$viewValue di dalam arahan Anda dan kosongkan bidang input, ketika nilainya diubah pada induk:

//set up a $watch for the ngModel.$viewValue
$scope.$watch(function () {
  return ngModel.$viewValue;
}, function (value) {
  //clear input value if model was cleared
  if (!value) {
    element.val("");
  }
});
2
Stanislav Kvitash 18 September 2017, 08:31