在写前端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. Thymeleaf引擎支持Multi Prefix

    最近团队的一个项目在重构,希望引入Thymeleaf减少页面端的代码复杂性.在重构过程中,发现html文件需要保存在多个不同的目录中,但Thymeleaf缺省的实现不支持这种方式. 1        ...

  2. node学习心得

    此次学习主要使用的是基于nodejs平台的web应用开发框架. 一.express的工程结构 1.bin/www:express的执行入口,存放可执行文件: 2.node_modules:存放pack ...

  3. AdaBoost对实际数据分类的Julia实现

    写在前面 AdaBoost是机器学习领域一个很重要很流行的算法,而Julia是一门新兴的发展迅速的科学计算语言.本文将从一个实际例子出发,展示如何用Julia语言实现AdaBoost算法. 什么是Ad ...

  4. ActiveMQ (三) 讯息传送机制以及ACK机制

    详析请看如下博客: http://blog.csdn.net/lulongzhou_llz/article/details/42270113 后续再做整理.

  5. Python 项目实践三（Web应用程序）第二篇

    接着上节的继续学习,使用Django创建网页的过程通常分三个阶段:定义URL.编写视图和编写模板.首先,你必须定义URL模式,每个URL都被映射到特定的视图--视图函数获取并处理网页所需的数据.视图函 ...

  6. 《精通Spring 4.X企业应用开发实战》读书笔记1-1（IoC容器和Bean）

    很长一段时间关注在Java Web开发的方向上,提及到Jave Web开发就绕不开Spring全家桶系列,使用面向百度,谷歌的编程方法能够完成大部分的工作.但是这种不系统的了解总觉得自己的知识有所欠缺 ...

  7. WebSocket协议：5分钟从入门到精通

    一.内容概览 WebSocket的出现,使得浏览器具备了实时双向通信的能力.本文由浅入深,介绍了WebSocket如何建立连接.交换数据的细节,以及数据帧的格式.此外,还简要介绍了针对WebSocke ...

  8. ThreadLocal 线程本地变量 及 源码分析

    ■ ThreadLocal 定义 ThreadLocal通过为每个线程提供一个独立的变量副本解决了变量并发访问的冲突问题 当使用ThreadLocal维护变量时,ThreadLocal为每个使用该变量 ...

  9. Javascipt数组

    Javascipt数组 在Javascript中数组的做用是:使用单独的变量名来储存一系列的值. 数组只有一个属性,就是length,length表示的数组所占内存空间的数目. <!DOCTYP ...

  10. python导入模块时的执行顺序

    当python导入模块,执行import语句时,到底进行了什么操作?按照python的文档,她执行了如下的操作: 第一步,创建一个新的module对象(它可能包含多个module) 第二步,把这个mo ...