current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
stack overflow careers
Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them, it only takes a minute:
up vote 0 down vote favorite

So basically i want to manupilate the DOM and replace a canvas tag with an img tag that has a angular variable as attrubute...

I use this line of code:

$("canvas").replaceWith('<img id="editImage" ng-src={{ImageToEdit}}>');

But what ends up beeing inserted is this:

<img id="editImage" ng-src="{{ImageToEdit}}">

The quotes surrounding {{ImageToEdit}} stops angular from realizing that it is part of the scope. Any solution would be greatly appreciated!

Edit: Okey so this is a bit more complicated than I thought... so maby you guys could help me better if I provide some more background:

So lets start with how it looks when the page is loaded:

<img id="editImage" class="edit-image" ng-src="{{ImageToEdit}}">
<button class="btn btn-success" ng-click="previous()">prev</button>
<button class="btn btn-success" onClick="invert()">invert</button>
<button class="btn btn-success" ng-click="next()">next</button>

when previous or next is called the ImageToEdit is changed, but if invert() is called:

function invert(){
img = document.getElementById('editImage');
var newpix = Pixastic.process(img, "invert");
}

Pixastic.process will modify the DOM and change the img tag to a canvas tag (and remove the ng-src attribute)

so when for example next() is called nothing will change... so what i try to do is call a function in next() that returns the data from canvas and turns it back into the original img tag..

$scope.next = function (){
var data = resetCanvasToImgAngGetModifiedData();
$scope.images[$scope.index] = data;
if($scope.index == ($scope.images.length -1)){
  $scope.index = 0;
}else{
  $scope.index = $scope.index + 1;
}
$scope.ImageToEdit = $scope.images[$scope.index];
}


function resetCanvasToImgAngGetModifiedData(){
var canvas = document.getElementById("editImage");
var dataURL = canvas.toDataURL();
$("canvas").replaceWith('<img id="editImage" class="edit-image" ng-src=  {{ImageToEdit}}>');
return dataURL;
 }

I do not understand how I am to accomplish this using directives... as the original img tag will be destroyed by Pixastic

share|improve this question
2  
Why dont you use directive to replace the content instead of using jQuery. I guess it could be easier to note the errors. However, I dont think the problem is with quotes here. – GeneratorOfOne May 8 '14 at 16:32
1  
For dynamic added html you need to use $compile service to compile the dynamic html content. – Chandermani May 8 '14 at 16:35
    
Ohh thanks! I will look in to $compile – BAYELK May 8 '14 at 16:59

1 Answer 1

up vote 1 down vote accepted

The img markup is correct, but this won't work I assume because the jQuery replaceWith occurs outside of the Angular context (Angular is not aware of the change) so it doesn't try to re-paint the DOM and the interpolation expression in ng-src doesn't get evaluated.

The quick and dirty fix would be to perform the jQuery replaceWith function inside of whatever appropriate angular directive should be used in your context like ng-click.

Or, manually compiling the html content with something like: 

angular.element($("#canvas")).injector().invoke(function($compile) {
    var scope = angular.element($("#canvas")).scope();
    var compiledImg = $compile('<img id="editImage" ng-src={{ImageToEdit}}>')(scope);
    $("#canvas").replaceWith(compiledImg);
});

https://docs.angularjs.org/api/ng/function/angular.element

Or, use a directive to manage the element (best).

share|improve this answer
    
when I try the code you suggested i get TypeError: Cannot read property 'invoke' of undefined... Is there some depencency I need to inject into my module? could not find any in the documentation... – BAYELK May 8 '14 at 17:56
    
Looks like the jquery selector is wrong in 2 spots - try logging angular.element($("#editImage")) to the console and if that comes back with the DOM object (depends on what Pixastic.process does to the element) try that. – Jesse Bibee May 8 '14 at 23:09
    
Thank you! I read up a bit and I agree that it is nor the prettiest solution, but hey it works:) – BAYELK May 9 '14 at 22:29

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.