Angularjs - exiting DOM element from HTML code
How can I get a DOM element (object) directly from HTML in AngularJS?
See the code below, please, it describes more of what I want to do.
I tried with curly braces, ng-bind-html .. None of them worked.
Any help would be appreciated. Thank!
var app = angular.module('myApp', ['ngSanitize'])
.controller('globalCtrl', function($scope){
$scope.imageToCanvas = function(image){
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
canvas.getContext("2d").drawImage(image, 0, 0);
return canvas;
};
$scope.img = new Image();
$scope.img.onload = function(){
$scope.canvas = $scope.imageToCanvas(this);
angular.element('#canvasTarget').html($scope.canvas);
};
$scope.img.src = "https://www.w3schools.com/css/trolltunga.jpg";
});
canvas {
max-width: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.6.4/angular-sanitize.min.js"></script>
<div ng-app="myApp">
<div ng-controller="globalCtrl">
<section>
<h3>Obviously html() method from JS code works fine.</h3>
<div id="canvasTarget"></div>
</section>
<hr />
<section>
<h3>But how to output an object directly from HTML code?</h3>
<p>try #1</p>
{{canvas}}
<p>try #2</p>
<div ng-bind-html="canvas"></div>
</section>
</div>
</div>
+3
source to share
1 answer
To manipulate the DOM you need to wrap it in a directive
app.directive('renderCanvas', function($compile){
return {
restrict: 'E',
scope: {
canvas: '='
},
link: function(scope, elem, attr){
console.log('canvas', scope.canvas);
scope.$watch('canvas', function(){
elem.html(' ');
var compiled = $compile(scope.canvas)(scope);
elem.append(compiled);
})
}
}
})
var app = angular.module('myApp', ['ngSanitize']);
app.directive('renderCanvas', function($compile){
return {
restrict: 'E',
scope: {
canvas: '='
},
link: function(scope, elem, attr){
console.log('canvas', scope.canvas);
scope.$watch('canvas', function(){
elem.html(' ');
var compiled = $compile(scope.canvas)(scope);
elem.append(compiled);
})
}
}
})
app.controller('globalCtrl', function($scope){
$scope.imageToCanvas = function(image){
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
canvas.getContext("2d").drawImage(image, 0, 0);
return canvas;
};
$scope.img = new Image();
$scope.img.onload = function(){
$scope.canvas = $scope.imageToCanvas(this);
//angular.element('#canvasTarget').html($scope.canvas);
$scope.$apply();
};
$scope.img.src = "https://www.w3schools.com/css/trolltunga.jpg";
});
canvas {
max-width: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.6.4/angular-sanitize.min.js"></script>
<div ng-app="myApp">
<div ng-controller="globalCtrl">
<section>
<h3>Obviously html() method from JS code works fine.</h3>
<div id="canvasTarget"></div>
</section>
<hr />
<section>
<h3>But how to output an object directly from HTML code?</h3>
<p>try #1</p>
<div data-ng-if="canvas">
<render-canvas canvas="canvas"></render-canvas>
</div>
<p>try #2</p>
<div ng-bind-html="canvas"></div>
</section>
</div>
</div>
+2
source to share