在写前端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. StringUtils工具类常用方法

    前言:工作中看到项目组里的大牛写代码大量的用到了StringUtils工具类来做字符串的操作,便学习整理了一下,方便查阅. isEmpty(String str) 是否为空,空格字符为false is ...

  2. webpack 理解

    目录 关于此文 在学习webpack之前,我们先去了解它的作用 它与其他其他前端工具(gulp,grunt)有什么差别呢 安装 webpack.config.js 配置结果 webpack 开始简单配 ...

  3. （通用）深度学习环境搭建：tensorflow安装教程及常见错误解决

    区别于其他入门教程的"手把手式",本文更强调"因"而非"果".我之所以加上"通用"字样,是因为在你了解了这个开发环境之后 ...

  4. 一、源代码-面向CLR的编译器-托管模块-(元数据&IL代码)

    本文脉络图如下: 1.CLR(Common Language Runtime)公共语言运行时简介 (1).公共语言运行时是一种可由多种编程语言一起使用的"运行时". (2).CLR ...

  5. 我搞zabbix的那两天（2）

    摘要:前一篇(我搞zabbix的那两天(1))我介绍了Zabbix的安装部署以及遇到的问题,这一篇将介绍zabbix 使用及短信等告警实现!!! Zabbix主界面及汉化方法介绍 1.1 初始化主界面 ...

  6. C语言学生管理系统（原版本）（自编）

    /*系统特色:(大牛勿笑) *颜色提示 *文字提示 *功能 */ #include <stdio.h> #include <stdlib.h> #include <mat ...

  7. asp.net 未能加载文件或程序集“WebApi”或它的某一个依赖项。试图加载格式不正确的程序。

    http://blog.csdn.net/lingxyd_0/article/details/43155039 一般情况下出现这样的问题是因为.dll文件不存在或者路径不正确.但今天我遇到的情况都不在 ...

  8. Ruby学习之元编程

    Kernel#evel()方法 和Object#instance_evel().Module#class_evel()方法类似,evel()方法也是一个内核方法,Object#instance_eve ...

  9. extjs Proxy

    我们先来看看Extjs非常绚丽的Grid,其功能包括显示数据列表,修改.删除,分页,排序等功能.   Grid组件用来显示Store中的数据.Store可以看做是Model实例的集合.Grid仅关心如 ...

  10. php require、require_once和include、include_once的区别

    一.引入php文件路径的方法require '文件路径'; require ('文件路径');require_once '文件路径'; require_once ('文件路径');include 同 ...