Question

我有一个agularjs指令，用于选择要上传的图片。该指令如下所示：

.directive('imagePickerTwo', ['$timeout', 'clipBoardService', function ($timeout, clipBoardService) {
    return {
        scope: {
            track: '=',
            changedp: "&"
        },
       template: '<button type="button" class="btn-upload-profile-image">Change Image{{track.id}}</button> <input id="file-input" type="file" ngf-pattern="\'image/*\'"\n' +
            'accept="image/*" class="hidden-xs-up"> <img ng-src="{{track.imageSrcCropped}}">',
        link: function (scope, element, attrs) {

            console.log(scope.track); //-----------log 1 works correctly

            element[0].querySelector('.hidden-xs-up').addEventListener('change', function (evt) {

                console.log(scope.track); //----------log 2. Not working. Value not updated

                var f = this
                var files = evt.target.files;
                var fileToLoad = files[0]
                var fileReader = new FileReader();
                fileReader.onload = function (fileLoadedEvent) {
                    var srcData = fileLoadedEvent.target.result; // <--- data: base64
                    scope.imageSrc = srcData
                    f.value = null
                    clipBoardService.setImageForTrackUploadPopUp(scope.imageSrc, scope.track.id)
                    scope.changedp()
                }
                fileReader.readAsDataURL(fileToLoad);
            });
            element.bind('click', function (evt) {
                //fire file input
                //$timeout(function () {
                document.getElementById('file-input').click()
                //}, 0);
            });
            // })
        }
    }
}]);

我访问指令的HTML代码如下所示。这段代码位于ng-repeat json数组循环的track内部：

<div class="upload-track-image" track=track changedp="changedp() "image-picker-two></div>

这里track是一个json，它从html传递给指令，该html是双向绑定的。该数组将使用新的track json推送，其中每个json具有唯一的ID。我的问题是，当我登录scope.track.id时，它第一次显示正确的值。但是，当我第二次选择图像时，log 1正确了，但是log 2却出错了。 track.id未使用新值进行更新。它记录旧的track.id。

基本上，问题是在link函数内部该值被更新，但是在querySelector函数内部该值未被更新。

我尝试将track.id分别传递给指令，就像传递track json一样，但是使用一种方式绑定。但是仍然存在相同的问题。

我一直在尝试解决这个问题。但是什么都没有解决。请帮忙。任何帮助将不胜感激。

谢谢。

双向链接范围值未在指令链接函数中的queryselector函数内部更新

0 个答案: