Angularjs - 從HTML代碼輸出DOM元素

Question

如何直接從AngularJS中的HTML代碼輸出DOM元素（對象）？
請參閱下面的代碼，它描述了我想要做的更多內容。

我嘗試用大括號，ng-bind-html ..沒有一個工作。

任何幫助將不勝感激。 謝謝！

 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

要操縱DOM，您需要將其包裝到指令中

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>