3
AngularJSのHTMLコードからDOMエレメント(オブジェクト)を直接出力するにはどうすればよいですか?
以下のコードをご覧ください。私は何をしたいのかを詳しく説明しています。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>
にそれをラップする必要があります。 – Beqa
名前を変更することもできます^^。これは単なる例です – Leguest
http://stackoverflow.com/a/24718593/5613548 これは私が実際にやりたかったものです。 – Beqa