javascript - 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>