1
私はangularjsを初めて使っています。anglejsにhtmlコンテンツを表示するには
私はAngularJsを使用してビューにHTMLコンテンツを表示しようとしています。 ng-modelを使用しましたが、これはHTMLコンテンツを表示している文字列として表示しています。
今私はng-bind-htmlを試していますが、これははじめて動作します。 私はデータを動的に追加しようとしています。しかし、データは表示されません。
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/angular.js" type="text/javascript"></script>
<script src="node_modules/angular-sanitize/angular-sanitize.js" type="text/javascript"></script>
</head>
<body>
<div style="float: right; width: 60%; height: 500px;" ng-app="myApp" ng-controller="myCtrl">
<div ng-bind-html="chatdata"></div>
</div>
<script>
var app = angular.module("myApp", ['ngSanitize']);
var a = "";
app.controller('myCtrl', function ($scope, $sce) {
a += "<div style='float: left; width: 70%'>p1 : data1</div>";
$scope.chatdata = $sce.trustAsHtml(a);
console.log(a);
var i = 2;
var interval = setInterval(function() {
if(i === 22) {
clearInterval(interval);
}
if (i % 2 === 0) {
a = a + "<div style='float: right; width: 70%'>p2 : data" + i +"</div>";
$scope.chatdata = $sce.trustAsHtml(a);
} else {
a = a + "<div style='float: left; width: 70%'>p1 : data" + i +"</div>";
$scope.chatdata = $sce.trustAsHtml(a);
}
console.log(a);
console.log($scope.chatdata);
i++;
}, 1000);
});
</script>
</body>
</html>
ご覧のとおり、データは1回だけ追加されます。
私はあなたに知らせることを試みます。早速のご返事ありがとうございます。 – Shubham