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

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

<div> </div>

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

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

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

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

<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:

<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即可。

原文出处:http://gsgundam.com/2014-12-13-angularjs-compile-to-show-dymanic-html-content/

AngularJS 不得不了解的服务 $compile 用于动态显示html内容的更多相关文章

  1. inux中tail命令---用于查看文件内容

    linux中tail命令---用于查看文件内容 最基本的是cat.more和less.1. 如果你只想看文件的前5行,可以使用head命令,如:head -5 /etc/passwd2. 如果你想查看 ...

  2. linux命令之----sort命令用于将文本文件内容加以排序

    1.sort命令作用 sort命令用于将文本文件内容加以排序,将输入行按照键值字段与数据类型选项以及locale排序. 一个可预期的记录次序,会让用户的查看使用更方便:书的索引.字典.目录以及电话簿等 ...

  3. Visual Studio Code 帮助查看器,指定的用于安装帮助内容的位置无效,或者您无权访问该位置

    今天有个C# 类库文件里面的属性想要了解下,想到了Vs的帮助文档,其实也就是微软的MSDN:提示帮助查看器,指定的用于安装帮助内容的位置无效,或者您无权访问该位置: 最近两天vs也没有更新,并且也没有 ...

  4. AngularJS——第8章 服务

    第8章 服务 服务是一个对象或函数,对外提供特定的功能. 8.1 内建服务 1. $location是对原生Javascript中location对象属性和方法的封装. // $location内置服 ...

  5. AngularJS中实现日志服务

    本篇体验使用AngularJS自定义一个记录日志的服务. 在AngularJS中,服务的一些写法是这样的: var app = angular.module('app',[]); app.provid ...

  6. angularJS中如何写服务

    服务的用途 服务提供了一种能在应用的整个生命周期内保持数据的方法,它能够在控制器之间进行通信,并且能保证数据的一致性 服务提供了把特定功能相关联的方法集中在一起的接口 如何创建服务 angularJS ...

  7. angularJS module里的'服务'

    首先,为了举栗子,先写好如下的模型,控制器,html: html: <!DOCTYPE html> <html ng-app="serviceApp"> & ...

  8. 自定义AngularJS中的services服务

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  9. AngularJs(Part 3)--注册服务

    有以下5中方法注册一个AngularJS可以识别的Service value和constant是两个极其简单的方法,只有少数情况下会使用. service已经开始复杂了起来.而factory是我认为既 ...

随机推荐

  1. redis学习研究--基础知识

    以下内容多为摘抄转载: 1. Redis 是什么 Redis是一个开源的使用ANSI C语言编写的基于内存的key/value存储系统,与memcache类似,但它支持的value类型更多,包括:字符 ...

  2. 安卓初步:通讯技术介绍&&安卓介绍

    通讯技术: 1G    模拟制式    只能进行语音通话. 2G    GSM, CDMA    收发短信和邮件. 2.5G    GPRS, EDGE    访问wap网络数据.(图片, 壁纸, 文 ...

  3. project euler 16:Power digit sum

    >>> sum([int(i) for i in str(2**1000)]) 1366 >>>

  4. Starship Troopers(HDU 1011 树形DP)

    题意: 给定n个定点和m个士兵,n个定点最终构成一棵树,每个定点有一定x个bugs和y个value,每20个bug需要消耗一个士兵,不足20也消耗一个,然后最终收获y个value,只有父节点被占领后子 ...

  5. ansilbe 入门001、ansible的介绍

    概述: ansible 作为一个配置管理工具.首先我们要“告诉”它管理的是那几台机器啊:而这个信息就在要ansible 的配置文件中体现了.默认情况下ansible的配置文件保存在 /etc/ansi ...

  6. 使用SC命令时注意事项

    使用SC命令时注意事项[转] Windows 2003 Server存在一个sc命令,(好像Windows 2000/XP/NT都有这个.)该命令可以手工创建Windows服务(NT Service) ...

  7. 巧用Graphviz和pvtrace等工具可视化C函数调用

    http://guiquanz.github.io/2012/10/15/linux_c_call_trace/

  8. 验证abc三列数字符合我的小弟要求

    需求好像是: 1.第一列数据有重复的找出来,并且找出它的重复位置 2.第三列根据第一列得出的位置,取出相应位置的数据进行相加 3.相加的结果 是否等同于第二列的对应位置数据 <!DOCTYPE ...

  9. LeeCode-Linked List Cycle

    Given a linked list, determine if it has a cycle in it. /** * Definition for singly-linked list. * s ...

  10. zoj 3471 Most Powerful(状态压缩dp)

    Recently, researchers on Mars have discovered N powerful atoms. All of them are different. These ato ...