Two way bound scope value not updating inside queryselector function in a directive link function
I have an agularjs directive for picking image for image upload. The directive looks like this:
.directive('imagePickerTwo', ['$timeout', 'clipBoardService', function ($timeout, clipBoardService)
return
scope:
track: '=',
changedp: "&"
,
template: '<button type="button" class="btn-upload-profile-image">Change Imagetrack.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);
);
// )
}]);
The HTML code where I access the directive looks like this. This piece of code comes inside an ng-repeat
where a track
json-array is looped:
<div class="upload-track-image" track=track changedp="changedp() "image-picker-two></div>
Here track
is a json which is passed to the directive from the html which is two way bound. The array will be pushed with new track
jsons where each json will have a unique id.
My problem is that when I log the scope.track.id
it shows the correct value the first time. But when I pick the image the second time the log 1
is coming correct but the log 2
comes wrong. track.id
is not getting updated with the new value. It logs the old track.id
.
Basically the problem is that inside the link
function the value is updated but inside the querySelector
function the value is not being updated.
I tried to pass the track.id
separately to the directive like I passed the track
json, but using one way binding. But still the same issue is coming.
I've been trying to solve this problem. But nothing is working out. Please help. Any help would be appreciated.
Thanks in advance.
angularjs angularjs-directive
add a comment |
I have an agularjs directive for picking image for image upload. The directive looks like this:
.directive('imagePickerTwo', ['$timeout', 'clipBoardService', function ($timeout, clipBoardService)
return
scope:
track: '=',
changedp: "&"
,
template: '<button type="button" class="btn-upload-profile-image">Change Imagetrack.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);
);
// )
}]);
The HTML code where I access the directive looks like this. This piece of code comes inside an ng-repeat
where a track
json-array is looped:
<div class="upload-track-image" track=track changedp="changedp() "image-picker-two></div>
Here track
is a json which is passed to the directive from the html which is two way bound. The array will be pushed with new track
jsons where each json will have a unique id.
My problem is that when I log the scope.track.id
it shows the correct value the first time. But when I pick the image the second time the log 1
is coming correct but the log 2
comes wrong. track.id
is not getting updated with the new value. It logs the old track.id
.
Basically the problem is that inside the link
function the value is updated but inside the querySelector
function the value is not being updated.
I tried to pass the track.id
separately to the directive like I passed the track
json, but using one way binding. But still the same issue is coming.
I've been trying to solve this problem. But nothing is working out. Please help. Any help would be appreciated.
Thanks in advance.
angularjs angularjs-directive
add a comment |
I have an agularjs directive for picking image for image upload. The directive looks like this:
.directive('imagePickerTwo', ['$timeout', 'clipBoardService', function ($timeout, clipBoardService)
return
scope:
track: '=',
changedp: "&"
,
template: '<button type="button" class="btn-upload-profile-image">Change Imagetrack.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);
);
// )
}]);
The HTML code where I access the directive looks like this. This piece of code comes inside an ng-repeat
where a track
json-array is looped:
<div class="upload-track-image" track=track changedp="changedp() "image-picker-two></div>
Here track
is a json which is passed to the directive from the html which is two way bound. The array will be pushed with new track
jsons where each json will have a unique id.
My problem is that when I log the scope.track.id
it shows the correct value the first time. But when I pick the image the second time the log 1
is coming correct but the log 2
comes wrong. track.id
is not getting updated with the new value. It logs the old track.id
.
Basically the problem is that inside the link
function the value is updated but inside the querySelector
function the value is not being updated.
I tried to pass the track.id
separately to the directive like I passed the track
json, but using one way binding. But still the same issue is coming.
I've been trying to solve this problem. But nothing is working out. Please help. Any help would be appreciated.
Thanks in advance.
angularjs angularjs-directive
I have an agularjs directive for picking image for image upload. The directive looks like this:
.directive('imagePickerTwo', ['$timeout', 'clipBoardService', function ($timeout, clipBoardService)
return
scope:
track: '=',
changedp: "&"
,
template: '<button type="button" class="btn-upload-profile-image">Change Imagetrack.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);
);
// )
}]);
The HTML code where I access the directive looks like this. This piece of code comes inside an ng-repeat
where a track
json-array is looped:
<div class="upload-track-image" track=track changedp="changedp() "image-picker-two></div>
Here track
is a json which is passed to the directive from the html which is two way bound. The array will be pushed with new track
jsons where each json will have a unique id.
My problem is that when I log the scope.track.id
it shows the correct value the first time. But when I pick the image the second time the log 1
is coming correct but the log 2
comes wrong. track.id
is not getting updated with the new value. It logs the old track.id
.
Basically the problem is that inside the link
function the value is updated but inside the querySelector
function the value is not being updated.
I tried to pass the track.id
separately to the directive like I passed the track
json, but using one way binding. But still the same issue is coming.
I've been trying to solve this problem. But nothing is working out. Please help. Any help would be appreciated.
Thanks in advance.
angularjs angularjs-directive
angularjs angularjs-directive
edited Nov 15 '18 at 13:36
Anitta Paul
asked Nov 15 '18 at 13:19
Anitta PaulAnitta Paul
286
286
add a comment |
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53320413%2ftwo-way-bound-scope-value-not-updating-inside-queryselector-function-in-a-direct%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53320413%2ftwo-way-bound-scope-value-not-updating-inside-queryselector-function-in-a-direct%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown