Угловая модель js-файла, направляющая на $ parse присваивать свойство scope, а не триггер контроллера $ watch - PullRequest
Новая
       36

Угловая модель js-файла, направляющая на $ parse присваивать свойство scope, а не триггер контроллера $ watch

0 голосов
/ 06 сентября 2018

У меня есть директива с именем file-model, которая ищет изменения в вводе файла, если какие-либо изменения во входном файле устанавливаются в качестве источника изображения рендеринга, конечно, я хочу установить свойство scope как файл и уведомлять контроллер об изменении в тип входного файла, поэтому я установил на контроллере функцию $ watcher, но она не сработает при изменении файла.

Вот моя директива: 

function fileModel($parse, $timeout) {
  var directive = {
    restrict: 'A',
    link: link,
  }
  return directive;

  function link(scope, element, attrs) {
    var renderer = attrs.renderer;
    var model = $parse(attrs.fileModel);
    var modelSetter = model.assign;
    element.bind('change', function() {
      var files = !!this.files ? this.files : [];
      if (!files.length || !window.FileReader)
        return; // no file selected, or no FileReader support
      if (/^image/.test(files[0].type)) { // only image file
        var reader = new FileReader(); // instance of the FileReader
        reader.readAsDataURL(files[0]); // read the local file

        reader.onloadend = function() { // set image data as background of div

          $("." + renderer).attr("src", this.result);
        }
      }
      scope.$apply(function() {
        scope.avtaruser = element[0].files[0]
        scope.changeavtar = true;
      });
    });
  }
}

Вот мой контроллер $watcher функция: 

$scope.$watch('avtaruser', function(value) {
  console.log($scope.avtaruser);
  if (typeof $scope.avtaruser !== 'undefined') {
    ps.avtarChange = true;
  }
}, true);

Вот мой HTML-код: 

<label for="file-input" ng-if="ps.canEdit" imagemodal="avtaruser" changeavtar="ps.avtarChange" file-model="avtaruser" data-renderer="avtarRenderer">
  Change
  <input id="file-input" file-model="avtaruser" data-renderer="avtarRenderer" style="display: none;" type="file"/>
</label>
...