在写前端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. BZOJ4817 SDOI2017 相关分析

    4821: [Sdoi2017]相关分析 Time Limit: 10 Sec  Memory Limit: 128 MBSec  Special Judge Description Frank对天文 ...

  2. iOS XIB等比例适配

    选择两个视图使其等宽高,再去约束里面就可以设置乘数因子. 简单的一个例子: 要求:设置白色视图的宽度为蓝色视图的一半 1.点击白色视图连线到父视图,选择 Equal Widths     2.选择右边 ...

  3. Achartengine.jar绘制动态图形一 --饼图

    PS:我们在做安卓程序的时候,免不了会做一些图形,自己可以选择自定义view ,就是用Canvas画,也可以用写好的jar包,就是achartengine.jar,使用jar包的好处就快速绘制图形,不 ...

  4. Linux第九讲随笔 -进程管理 、ps aux 、

    Linux第九讲1,进程管理 Linux在执行每一个程序时,就会在内存中为这个程序建立一个进程,以便让内核可以管理这个运行中的进程,进程是系统分配各种资源,进程调度的基本单位. 怎么查看进程 一.ps ...

  5. python自动生成excel报表

    1.将SQL语句查询的内容,直接写入到excel报表中,以下为全部脚本.要求:此版本必须运维在windows平台,并且安装了excel程序,excel版本不限. python版本为2.7 if b 判 ...

  6. application19事件 20多少步骤 具体20多少只有微软知道！！！

  7. FPGA设计思想与技巧（转载）

    题记:这个笔记不是特权同学自己整理的,特权同学只是对这个笔记做了一下完善,也忘了是从那DOWNLOAD来的,首先对整理者表示感谢.这些知识点确实都很实用,这些设计思想或者也可以说是经验吧,是很值得每一 ...

  8. iOS中的armv7,armv7s,arm64,i386,x86_64

    前言 一般iOS中的armv7.armv7s.arm64.i386.x86_64这些都代表了什么?在Xcode中如何选择? 介绍 armv7.armv7s.arm64都是ARM处理器的指令集. i38 ...

  9. MNIST-NameError: name ‘input_data’ is not defined解决办法

    在学习TensorFlow文档教程的时候, 在MNIST入门一节,发现直接运行下载MNIST数据集的代码会报错.原代码如下: import tensorflow.examples.tutorials. ...

  10. iconfont-字体图标

    看到支付宝官网,使用很多iconfont-字体图标.素色,纯色,体积小,尝试使用做个demo,以便日后参考使用 ============================ <h1>第一个结构 ...