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); 
 
\t \t return canvas; 
 
\t }; 
 
    
 
    $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); 
 
\t \t return canvas; 
 
\t }; 
 
    
 
    $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>