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