在写前端js时，经常会动态创建标签放入文本元素中：

比如：var strDiv='<div>new create element</div>';

　　　$(strDiv).appendTo($('div'));

在使用angular做项目时，有时也会需要动态来创建标签。那么由于angular的安全机制，是否会被angular编译；

如：var strDiv='<div>{{angular.bind}}</div>';  //这里用到了angular的绑定。

　　　$(strDiv).appendTo($('div'));

验证：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

		<script src="libs/angular/angular.js" type="text/javascript" charset="utf-8"></script>

	</head>

	<body>

		<div id="" ng-app='app' ng-controller='controller'>

			<!--<h1>实践$compile</h1>--> <!--通过angular 来动态添加这一句-->

		</div>

		<script type="text/javascript">

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

			app.controller('controller',function($compile,$scope){

				/* js 动态创建*/

				$scope.appearText='创建成功，angular绑定是否成功';

				var string='<h1 id="isSuccess">{{appearText}}</h1>';

				$(string).appendTo($('div'));

			})

		</script>

	</body>

</html>

　　

由此可以看的出来，js动态创建的标签使用angular绑定并不会被识别和编译。

所以$compile是将创建出来的标签重新编译一下，被angular识别，这样元素将享受angular一切的待遇。

验证：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

		<script src="libs/angular/angular.js" type="text/javascript" charset="utf-8"></script>

	</head>

	<body>

		<div id="" ng-app='app' ng-controller='controller'>

			<!--<h1>实践$compile</h1>--> <!--通过angular 来动态添加这一句-->

		</div>

		<script type="text/javascript">

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

			app.controller('controller',function($compile,$scope){

				/* angualr 动态创建*/

				$scope.appearText='创建成功，angular绑定是否成功';

				var compile=$compile("<h1>{{appearText}}</h1>");

				$(compile($scope)).appendTo($('div'));

			})

		</script>

	</body>

</html>

　　

angular $compile的使用的更多相关文章

  1. Angular源码分析之$compile

    @(Angular) $compile,在Angular中即"编译"服务,它涉及到Angular应用的"编译"和"链接"两个阶段,根据从DO ...

  2. Compile FreeCAD on Windows

    Compile FreeCAD on Windows eryar@163.com 1.Introduction FreeCAD是一个参数化的三维造型软件,主要用于任意大小的实际模型的设计.参数化的建模 ...

  3. maven 加入json-lib.jar 报错 Missing artifact net.sf.json-lib:json-lib:jar:2.4:compile

    <dependency> <groupId>net.sf.json-lib</groupId> <artifactId>json-lib</art ...

  4. $compile

    <html ng-app="compile"> <head> <script src="http://apps.bdimg.com/libs ...

  5. 关于The C compiler "arm-none-eabi-gcc" is not able to compile a simple test program. 的错误自省...

    在 GCC ARM Embedded https://launchpad.net/gcc-arm-embedded/ 上面下载了个arm-none-eabi-gcc 用cmake 编译时 #指定C交叉 ...

  6. My first makefile to compile multiple C files

    I have three files to compile: main.c, func.c,  func.h The steps: 1   main.c   to   main.o 2   func. ...

  7. angular中的compile和link函数

    angular中的compile和link函数 前言 这篇文章,我们将通过一个实例来了解 Angular 的 directives (指令)是如何处理的.Angular 是如何在 HTML 中找到这些 ...

  8. Angular使用$compile为从Ajax加载的HTML绑定ng-click事件

    这是一个Angular使用$compile为从Ajax加载的HTML绑定ng-click事件的实现方式,由于近期忙碌,就先放代码.代码如下: <table data-ng-table=" ...

  9. Maven命令行使用：mvn clean compile（编译）

    先把命令行切换到Maven项目的根目录,比如:/d/xxxwork/java/maven-test,然后执行命令: mvn clean compile 执行结果如下: [INFO] Scanning ...

  10. angular源码分析：$compile服务——指令的编写

    这一期中,我不会分析源码,只是翻译一下"https://docs.angularjs.org/api/ng/service/$compile",当然不是逐字逐句翻译,讲解指令应该如 ...

随机推荐

  1. bzoj 4566: [Haoi2016]找相同字符

    Description 给定两个字符串,求出在两个字符串中各取出一个子串使得这两个子串相同的方案数.两个方案不同当且仅当这两 个子串中有一个位置不同. Input 两行,两个字符串s1,s2,长度分别 ...

  2. RSA，DES，RC4，3DES ，MD5

    一,RSA算法基于一个十分简单的数论事实:将两个大质数相乘十分容易,但是想要对其乘积进行因式分解却极其困难,因此可以将乘积公开作为加密密钥. RSA算法是一种非对称密码算法,所谓非对称,就是指该算法需 ...

  3. eslint常见规则总结

    google: eslint+rules es6: impot When you import the module's default, don't use brace {} 意思是,当你使用默认的 ...

  4. 6.Nginx作为负载均衡服务器应用

    案例:Nginx作为负载均衡服务器应用 nginx的负载均衡功能是通过upstream命令实现的,因此他的负载均衡机制比较简单,是一个基于内容和应用的7层交换负载均衡的实现.Nginx负载均衡默认对后 ...

  5. uEditor富文本编辑器

    在配合vue和webpack使用时,在严格模式下注意会报错,需要修改配置. 我采用的方式:----不建议全部取消严格模式,因为一些插件必须要再严格模式才能运行的 对UEditor的严格模式报错文件,取 ...

  6. PHP字符串处理与正则表达式

    字符串 1. PHP中的字符串是一种基本数据类型,PHP对unicode没有本地支持. 2. 字符串可以可以通过花括号来访问每一个字符,并且每个花括号只能存放一个字符:     $str = 'abc ...

  7. 用 CSS3 做一个流星雨动画

    昨天 UI 提交过来一个登录页的设计稿,要求背景有一个流星雨动画,做完之后觉得挺有趣,分享一下~ 一.流星动画 首先创建一个 div 作为画布 <div id="stars" ...

  8. Exception: Unexpected End Of File(crontab)

    Exception: Unexpected End Of File [solphire@hadoop02 tools]$ crontab -l 1 * * * * source /etc/profil ...

  9. 搭建CAS服务器，并实现一个简单的单点登录的demo

    官网:http://jasig.github.io/cas/Cas Server下载:http://developer.jasig.org/cas/Cas Client下载:http://develo ...

  10. vue2.0 正确理解Vue.nextTick()的用途

    什么是Vue.nextTick() 官方文档解释如下: 在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM. 获取更新后的DOM,言外之意就是DOM更新 ...