javascript - AngularJ html插入到视图

  显示原文与译文双语对照的内容

是否可以在 angular控制器 中创建一个 HTML Fragment,并在视图中显示该 HTML?

这源于将不一致的JSON blob转换为嵌套的id : value 对的需求。 因此,HTML是在控制器中创建的,我现在正在寻找它。

我已经创建了一个模型属性,但不能在视图中渲染它,而它只打印 HTML 。


更新

问题似乎是从 Angular 将创建的HTML呈现为引号中的字符串。 试图在这里附近找到一种方式。

示例控制器:


var SomeController = function () {

 this.customHtml = '<ul><li>render me please</li></ul>';
}

示例视图:


<div ng:bind="customHtml"></div>

给出:


<div>
"<ul><li>render me please</li></ul>"
</div>

时间:

你也可以创建这样的过滤器:


var app = angular.module("demoApp", ['ngResource']);

app.filter("sanitize", ['$sce', function($sce) {
 return function(htmlCode){
 return $sce.trustAsHtml(htmlCode);
 }
}]);

然后在视图中


<div ng-bind-html="whatever_needs_to_be_sanitized | sanitize"></div>

Angular JS在标记中显示 HTML

上链接中提供的解决方案为我工作,这个线程上的任何选项都没有。 对于任何使用AngularJS版本 1.2.9的人来说都是一样

下面是一个副本:


Ok I found solution for this:

JS:

$scope.renderHtml = function(html_code)
{
 return $sce.trustAsHtml(html_code);
};
HTML:

<p ng-bind-html="renderHtml(value.button)"></p>

编辑:

下面是设置:

JS file:


angular.module('MyModule').controller('MyController', ['$scope', '$http', '$sce',
 function ($scope, $http, $sce) {
 $scope.renderHtml = function (htmlCode) {
 return $sce.trustAsHtml(htmlCode);
 };

 $scope.body = '<div style="width:200px; height:200px; border:1px solid blue;"></div>'; 

 }

HTML file:


<div ng-controller="MyController">
 <div ng-bind-html="renderHtml(body)"></div>
</div>

在html上


<div ng-controller="myAppController as myCtrl">

<div ng-bind-html-unsafe="myCtrl.comment.msg"></div>

或者


<div ng-bind-html="myCtrl.comment.msg"></div

在控制器上


mySceApp.controller("myAppController", function myAppController( $sce) {

this.myCtrl.comment.msg = $sce.trustAsHtml(html);

工作也与 $scope.comment.msg = $sce.trustAsHtml(html);

幸好,你不需要任何花哨的过滤器或者不安全的方法来避免错误消息。 这是在预期和安全的方式下正确输出HTML标记的完整实现。

在 Angular 之后必须包含sanitize模块:


<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-sanitize.js"></script>

然后,必须加载模块:


angular.module('app', [
 'ngSanitize'
]);

这将允许你从控制器,指令等中包含标记中的标记:


scope.message ="<strong>42</strong> is the <em>answer</em>.";

最后,在模板中,它必须像这样输出:


<p ng-bind-html="message"></p>

这将产生预期的输出: 42 回答。

我发现使用ng-sanitize不允许在html中添加 ng-click 。

为了解决这个问题,我添加了一个指令。 就像这个:


app.directive('htmldiv', function($compile, $parse) {
return {
 restrict: 'E',
 link: function(scope, element, attr) {
 scope.$watch(attr.content, function() {
 element.html($parse(attr.content)(scope));
 $compile(element.contents())(scope);
 }, true);
 }
}
});

这是 HTML:


<htmldiv content="theContent"></htmldiv>

好运。

刚刚使用ngBindHtml遵循 angular( v1.4 ) 文档.


<div ng-bind-html="expression"></div> 
and expression can be"<ul><li>render me please</li></ul>"

确保在模块的依赖关系中包含 ngSanitize 。 那么它应该能正常工作。

另一个解决方案,非常类似于使用作用域属性的blrbr:


angular.module('app')
.directive('renderHtml', ['$compile', function ($compile) {
 return {
 restrict: 'E',
 scope: {
 html: '='
 },
 link: function postLink(scope, element, attrs) {

 function appendHtml() {
 if(scope.html) {
 var newElement = angular.element(scope.html);
 $compile(newElement)(scope);
 element.append(newElement);
 }
 }

 scope.$watch(function() { return scope.html }, appendHtml);
 }
 };
 }]);

然后


<render-html html="htmlAsString"></render-html>

注意你可能取代 element.append()element.replaceWith()

...