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


})();

问题是我无法在控制器中检索翻译字符串，定义如下：

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

读取文件指令与控制器为

1 个答案: