在写前端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. php编码的一些小规范

    本文同时发表在https://github.com/zhangyachen/zhangyachen.github.io/issues/104 最近在整理线上的hhvm warning,虽然每天产生百万 ...

  2. bzoj 3894: 文理分科

    Description  文理分科是一件很纠结的事情!(虽然看到这个题目的人肯定都没有纠 结过)  小P所在的班级要进行文理分科.他的班级可以用一个n*m的矩阵进行 描述,每个格子代表一个同学的座位. ...

  3. 重写JS的鼠标右键点击菜单

    重写JS的鼠标右键点击菜单 该效果主要有三点,一是对重写的下拉菜单的隐藏和显示:二是屏蔽默认的鼠标右键事件:三是鼠标左键点击页面下拉菜单隐藏. 不多说,上html代码: 1 <ul id=&qu ...

  4. 随手记一下，VS2015卡顿问题解决。

    不知道什么开始,vs2015卡顿的很,启动时加载项目很慢,调试是启动慢,停止调试时直接卡死半分钟.其他都还能忍受,最不能忍受的是点击停止调试按钮后十几秒没反应! 网上有解决方案如下几个,我试了,都不行 ...

  5. 部署github开源软件遇到的问题

    jdk1.8源版本不一样: 将语言级别改为8,所有的jdk都配置为1.8 2. 遇到一些解析错误 应该是tomcat的jdk版本和项目的jdk版本不一样

  6. jQuery 事件方法（二）

    方法 描述 bind() 向匹配元素附加一个或更多事件处理器 blur() 触发.或将函数绑定到指定元素的 blur 事件 change() 触发.或将函数绑定到指定元素的 change 事件 cli ...

  7. PHP连接LDAP进行登录验证

    基于安全性考虑,准备把PHP做的自动化平台加入ldap登录验证,具体做法如下: 了解背景: LDAP 的全称是"轻量级目录访问协议(Lightweight Directory Access ...

  8. Java框架之Hibernate（三）

    本文主要讲解: 1 级联 cascade 关键字 2 级联删除 3 inverse 关键字 4 懒加载 5 缓存的模拟 6 Hibernate 的一级缓存 7 Hibernate 的二级缓存 一.级联 ...

  9. [笔记]《JavaScript高级程序设计》- 最佳实践

    一.可维护性 1 什么是可维护的代码 可理解性--其他人可以接受代码并理解它的意图和一般途径,而无需原开发人员的完整解释. 直观性--代码中的东西一看就能明白,不管其操作过程多么复杂. 可适应性--代 ...

  10. python之dictionary

    1.python3字典 字典是另一种可变容器模型,且可存储任意类型对象. 字典的每个键值(key=>value)对用冒号(:)分割,每个对之间用逗号(,)分割,整个字典包括在花括号({})中 d ...