AngularJS 不得不了解的服务 $compile 用于动态显示html内容

转载 2016年05月30日 15:17:01

项目中一度纠结与AngularJS如何动态显示不同的html内容。

本来是希望直接使用下面的语句来实现:

1
<div> </div>

但是很尴尬的是,这样不能识别出html标签,而是直接将html里的页面标签全都显示出来了。这当然不是我想要的效果。

谷哥了一番,没想到在官网上就找到了我想要实现的效果,而实现的主角就是今天的 $compile 服务。

https://docs.angularjs.org/api/ng/service/$compile

节选一下关键部分内容,Javascript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<script>
angular.module('compileExample', [], function($compileProvider) {
// configure new 'compile' directive by passing a directive
// factory function. The factory function injects the '$compile'
$compileProvider.directive('compile', function($compile) {
// directive factory creates a link function
return function(scope, element, attrs) {
scope.$watch(
function(scope) {
// watch the 'compile' expression for changes
return scope.$eval(attrs.compile);
},
function(value) {
// when the 'compile' expression changes
// assign it into the current DOM
element.html(value);
// compile the new DOM and link it to the current
// scope.
// NOTE: we only compile .childNodes so that
// we don't get into infinite loop compiling ourselves
$compile(element.contents())(scope);
}
);
};
});
})
.controller('GreeterController', ['$scope', function($scope) {
$scope.name = 'Angular';
$scope.html = 'Hello ';
}]);
</script>

Html:

1
2
3
4
5
<div ng-controller="GreeterController">
<input ng-model="name"> <br>
<textarea ng-model="html"></textarea> <br>
<div compile="html"></div>
</div>

总之就是用$compile服务创建一个directive ‘compile’,这个complie会将传入的html字符串或者DOM转换为一个template,然后直接在html里调用compile即可。

我基本就是直接copy过来就可以用了,各位看官自便咯~


♦ 本文固定连接:http://gsgundam.com/2014-12-13-angularjs-compile-to-show-dymanic-html-content/

♦ 转载请注明:GSGundam 2014年12月13日发布于 GSGUNDAM砍柴工


ionic 加载html解析错误的解决方案

ionic 加载html 内容时,会出现不能解析html的问题。 可以通过  $sce.trustAsHtml(htmlContent) 对html进行转义...

【AngularJS】刷新页面时,短暂出现未渲染的代码

今天碰到一个问题,刷新页面时,会短暂出现未渲染的代码,大约一分钟,如下: {{record.name}} {{record.state}} 原因暂时还没搞清楚,代码和其他页面一样...
  • IamTZz
  • IamTZz
  • 2016年08月26日 17:51
  • 1685

Angularjs使用$compile编译普通html

app.directive('mySample', function($compile) { return { //template:" {{sampleData}} " ...

angularjs 实现简单的快递页面

Title                      * {                 margin: 0;                 padding: 0;             } ...
  • Liquor2
  • Liquor2
  • 2017年10月25日 19:51
  • 82

AngularJS中插入HTML片段

HTML 先使用 $sce.trustAsHtml(html_in_string) 将标记为信任,然后使用 data-ng-bind-html="html_in_string" 取消转义即可。 js ...

Static控件 动态显示内容

  • 2014年04月01日 22:10
  • 48KB
  • 下载

C#中,当鼠标移动到控件上,动态显示提示内容 -> 用代码操作ToolTip

【背景】 写了个C#的小程序,其中在Settings窗体中有些配置参数,希望在鼠标移动到对应的配置选项上,动态显示相关的说明解释内容。 【解决过程】 1.原先就已经知道,有些控件,是带ToolT...

动态显示数据库的内容

  • 2011年08月11日 15:54
  • 582B
  • 下载

一个PHP一直执行的例子 不会计划任务可以用这个 PHP+jquery前台动态显示数据库内容

config:数据库配置文件 index.html   number.php 执行客户端退出也会一直执行 return.php    取出数据库数据 ignore_user_abort();//关掉浏...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:AngularJS 不得不了解的服务 $compile 用于动态显示html内容
举报原因:
原因补充:

(最多只允许输入30个字)