0

I start with an empty container in my html with id #template. When the user clicks a blue button in the right bottom corner of the browser an image tag is added to the container. The image tag which source and alt text are bound with angular to the values of two input elements as show in the code below.

After the user enters a url for the image source and text for the alt text, he/she can click a button to save the entire html code of the image with the new values entered for imgSrcB1 and altTxtB1 in the Html 5 localStorage

//input and image bound in angular with imgSrcB1 and altTxtB1
<input type="text" name="imagelink" ng-model="imgSrcB1">
<input type="text" name="title" ng-model="altTxtB1">

<img style="width:100%;" ng-src="{{imgSrcB1}}" alt="{{altTxtB1}}" />

.

Here is how I am storing the contents of a container width id #template in a local storage. This container contains the img element as a child node.

//localStorage stores value of source and alt attribute of image after user edit.
var temp = jQuery('#template').html();
if (typeof(Storage) !== "undefined") {
    localStorage.setItem("cookie", temp);
} else {
    document.getElementById("cookie-wrapper").innerHTML = "Sorry, your browser 
    does not support Web Storage...";
}

.

When the user refreshes the page, and clicks on the same blue button, the image now loads with the image source and alt text entered previously. But here is where the user loses angular data binding. Editing the values of the input fields no longer updates the image source and alt text.

I would like the user to be able to change again the source and alt text after loading the image with data filled from localStorage.

function loadCookie() {
    document.getElementById("cookie-wrapper").innerHTML = 
    localStorage.getItem("cookie");
}

.

I hope you understood me. Thank you for your contribution

Peter
  • 10,492
  • 21
  • 82
  • 132
Ramo tuber
  • 11
  • 2
  • Mixing AngularJS and jQuery like this is asking for trouble. This type of DOM manipulation should be done in a [custom directive](https://docs.angularjs.org/guide/directive). – georgeawg Feb 06 '18 at 15:31
  • maybe I could use $scope.$apply or something to reset binding – Ramo tuber Feb 07 '18 at 13:05
  • `$scope.apply()` should be done inside a directive (or service). My previous comment still applies. By mixing AngularJS and jQuery like this, the code becomes difficult to understand, debug, test, and maintain. Read [“Thinking in AngularJS” if I have a jQuery background](https://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background). – georgeawg Feb 07 '18 at 20:48

0 Answers0