AngularJS v1.5.0 ng-модель не работает после загрузки изображения и преобразования в base64 - PullRequest
Новая
       0

AngularJS v1.5.0 ng-модель не работает после загрузки изображения и преобразования в base64

0 голосов
/ 05 февраля 2020

Я пытаюсь загрузить изображения как base64 в приложении Canvas с angular v1.5 

<body ng-app="ThermalLabelWebEditor" ng-controller="Controller as main">
......
<label class="col-md-12">
Base64
<input class="form-control" type="file" id="file" accept="image/jpeg" />
<button class="btn btn-primary" ng-click="main.uploadImage()">Add Image</button>
<textarea id="vf_base64" required class="form-control" 
          ng-model="main.imageItem.source_base64">
</textarea>

</label>

Функция загрузки 

var controller = app.controller("Controller", function ($http,$scope) {
    ........
    this.imageItem = {};

    this.uploadImage = function () {

        var f = document.getElementById('file').files[0],
            r = new FileReader();

        r.readAsDataURL(f);                
        var me = this;
        r.onloadend = function () {

            var res = r.result.substring(23, r.result.length);                           
            me.imageItem.source_base64 = res;  

            console.log(me.imageItem);  
        };
        r.onerror = function (error) {
            console.log(error);
            me.imageItem.source_base64 =  'Error: ' + error;
        };
    };

Я вижу, что поле заполнено 

{data_field: "", data_field_format_string: "", comments: "", print_as_graphic: false, x: 0.10431385040283203, …}
data_field: ""
....
source_base64: "/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxMTEhUUExMWFh"
sizing: 1
width: 2.7291666666666665
height: 2.5625
name_at_printer_storage: ""

Но в Textarea ничего не появляется

Ответы [ 2 ]

0 голосов
/ 05 февраля 2020

Я нашел решение с помощью директивы. Код: 

app.directive("ngImageread", [function () {
    return {
        scope: {
            ngImageread: "=",
        },
        link: function (scope, element, attributes) {
            element.bind("change", function (changeEvent) {
                var reader = new FileReader();
                reader.onload = function (loadEvent) {
                    scope.$apply(function () {
                        scope.ngImageread = loadEvent.target.result.substring(23, reader.result.length);
                    });
                }
                reader.readAsDataURL(changeEvent.target.files[0]);
            });
        }
    }
}]);
0 голосов
/ 05 февраля 2020

Добавить $apply: 

this.uploadImage = function () {

    var f = document.getElementById('file').files[0],
        r = new FileReader();

    r.readAsDataURL(f);                
    var me = this;
    r.onloadend = function () {

        var res = r.result.substring(23, r.result.length);                           
        me.imageItem.source_base64 = res;  
        //IMPORTANT
        $scope.$apply();
        console.log(me.imageItem);  
    };
    r.onerror = function (error) {
        console.log(error);
        me.imageItem.source_base64 =  'Error: ' + error;
        //IMPORTANT
        $scope.$apply();
    };
};

AngularJS изменяет обычный поток JavaScript, предоставляя собственную обработку событий l oop. Это разбивает JavaScript на классический и AngularJS контекст выполнения. Только операции, которые применяются в контексте выполнения AngularJS, получат выгоду от AngularJS привязки данных, обработки исключений, отслеживания свойств и т. Д. c ... Вы также можете использовать $ apply () для введите AngularJS контекст выполнения из JavaScript.

Имейте в виду, что в большинстве мест (контроллеры, службы) $ apply уже был вызван для вас директивой, которая обрабатывает событие. Явный вызов $ apply необходим только при реализации пользовательских обратных вызовов, или при работе со сторонними обратными вызовами библиотеки.

Для получения дополнительной информации, см.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...