read file directive with controller as

Question

I need some help. I build the following directve to translate docx file into html string.

(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;
            }


})();

the problem is that i'm not able to retrivie the translate string in the controller, defined as follows:

        (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 = "";*/

                }
        })();

I thought that the line : scope.vm.result = result.value was able to bind the string to my controller and then that i was able to render it in the view as refertazione.result (refertazione is the name of my controller). But this not works, where I'm wrong?

Nix · Accepted Answer · 2016-09-20 12:24:58Z

1

A slightly better pattern that relies on events. You could pull this same pattern off with a scope variable that is two way. Idea is you use an event to tell the controller data has changed.

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;
}

Inside of your controller you would listen for the fileupdate event.

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

answered Sep 20, 2016 at 12:24

Nix

58.8k31 gold badges154 silver badges206 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Pierpaolo Croce Over a year ago

your solution is good but in the vm.content I can not obtain the txt content...i.e. I'm not able to render vm.content in my view (the controller name is refertazione so I would be able to render vm.content as refertazione.content). If a log(vm.content) I can read the txt content

Nix Over a year ago

I just followed your example, and I'm not following your issue. Are you trying to alias it to a diff vm variable? And are you sure the reader.onload code is working correctly?

Pierpaolo Croce Over a year ago

I'm trying to render the txt content in the view. As I can log in the console the txt content, I think reader.onload is working correctly. I appreciate your help.

Collectives™ on Stack Overflow

read file directive with controller as

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related