читать директиву файла с контроллером как

Question

Мне нужна помощь. Я создаю следующий directve для перевода файла docx в строку html.

(function(){ 
'use strict'; 
angular 
    .module('app.core') 
     .directive('uploadFile', uploadFile); 

     function uploadFile($rootScope, $parse){ 
     var directive = { 

        restrict: "A", 
        scope:{result : '='}, 
        controller: 'refertazioneController', 
        controllerAs: "vm", 
        link: linkFunction, 


     }; 

       function linkFunction(scope, element, attrs, controller){ 

        document.getElementById("document") 
         .addEventListener("change", handleFileSelect, false); 

        function handleFileSelect(event) { 
         readFileInputEventAsArrayBuffer(event, function(arrayBuffer) { 
          mammoth.convertToHtml({arrayBuffer: arrayBuffer}) 
           .then(displayResult) 
           .done(); 
         }); 
        } 

        function displayResult(result) { 
          scope.vm.result = resutl.value; 

       /*  document.getElementById("output").innerHTML = result.value; 

         var messageHtml = result.messages.map(function(message) { 
          return '<li class="' + message.type + '">' + escapeHtml(message.message) + "</li>"; 
         }).join(""); 

         document.getElementById("messages").innerHTML = "<ul>" + messageHtml + "</ul>";*/ 

        } 

        function readFileInputEventAsArrayBuffer(event, callback) { 
         var file = event.target.files[0]; 

         var reader = new FileReader(); 

         reader.onload = function(loadEvent) { 
          var arrayBuffer = loadEvent.target.result; 
          callback(arrayBuffer); 
         }; 

         reader.readAsArrayBuffer(file); 
        } 

        function escapeHtml(value) { 
         return value 
          .replace(/&/g, '&amp;') 
          .replace(/"/g, '&quot;') 
          .replace(/</g, '&lt;') 
          .replace(/>/g, '&gt;'); 
        } 

           }; 

      return directive; 
      } 


})(); 

проблема заключается в том, что я не в состоянии retrivie на перевод строки в контроллере, определяется следующим образом:

 (function(){ 
       'use strict'; 
       angular 
        .module('app.core') 
         .controller('refertazioneController', refertazioneController); 

       function refertazioneController($stateParams, refertationService, $window, examinationService, dataService, $scope){ 
        var vm = this; 
        vm.prova="refertazioneController"; 
        vm.tinymceModel = ''; 
        vm.sospeso=true; 
        vm.datiDaRefertare = $stateParams; 
        vm.paziente = dataService.getPatient(vm.datiDaRefertare.patientId); 

        examinationService.getPatientExamsDef(vm.datiDaRefertare.patientId).then(function(r){ 
         vm.subjectExam = r.data[0].data; 
        }) 

        console.log(vm.paziente); 
        vm.currentUser = sessionStorage; 
        vm.tinymceOptions = { 
        onChange: function(e) { 
        // put logic here for keypress and cut/paste changes 
        }, 
        inline: false, 
        slector: 'textarea', 
        // toolbar: 'undo redo | styleselect | bold italic | link image | print save cancel', 
        height: 500, 
        plugins : 'advlist autolink link image lists charmap print preview template save paste', 
        skin: 'lightgray', 
        theme : 'modern', 
        language:'it', 
        statusbar: false, 
        templates:[ {title: 'Titolo1', description: 'Descrizione1', content: '<p style="text-align: center;">'+ 
                         '<strong>A.S.L. 02 LANCIANO-VASTO-CHIETI</strong>'+ 
                         '</p>'}, 
           {title: 'Titolo2', description: 'Secondo referto', url: 'sections/refertazione/referto1.html'} 
           ] 
        }; 

        vm.html = {}; 
        //vm.html.content = '<p>qui per esempio ci va il template che mi ridà il back end</p><h2>altra roba</h2>'; 

        refertationService.openRefert(1,2); 
        refertationService.closeRefert(1,2); 
        refertationService.saveRefert(1,2); 

       /* vm.testoHtml = "";*/ 

       } 
     })(); 

Я думал, что линия: scope.vm.result = result.value был в состоянии связать строку мой контроллер, а затем я смог отобразить его в представлении как refertazione.result (refertazione - это имя моего контроллера). Но это не работает, где я ошибаюсь?

Answer 1

Немного лучший образец, который опирается на события. Вы можете вытащить этот же шаблон с переменной области видимости, которая является двумя способами. Идея - вы используете событие, чтобы сообщить, что данные контроллера изменены.

function uploadFile($rootScope, $parse) { 
    var directive = { 
     restrict: "A", 
     scope: {}, 
     link: linkFunction, 

    }; 

    function linkFunction(scope, element, attrs) { 
     var fn = $parse(attrs.uploadFile); 
     element.on('change', function(onChangeEvent) { 
      var reader = new FileReader(); 
      console.log(reader); 
      reader.onload = function(onLoadEvent) { 
       $rootScope.$broadcast('fileupdate', onLoadEvent.target.result); 
      }; 
      reader.readAsText((onChangeEvent.srcElement || onChangeEvent.target).files[0]); 
     }); 
    } 
    return directive; 
} 

Внутри вашего контроллера вы будете слушать событие fileupdate.

//inside your controller: 
$scope.$on('fileupdate', showContent); 
function showContent(event, $fileContent){ 
    vm.content = $fileContent; 
}