Angularjs - 从HTML代码输出DOM元素

Question

How do I output a DOM element (object) directly from the HTML code in AngularJS?
See the code below please, it describes more of what I want to do.

I tried with curly brackets, ng-bind-html.. none of them worked.

Any help will be appreciated. Thanks!

 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> 

Answer 1

To manipulate DOM you need wrap it into 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>