项目中一度纠结与AngularJS如何动态显示不同的html内容。

本来是希望直接使用下面的语句来实现:

<div> </div>

但是很尴尬的是,这样不能识别出html标签,而是直接将html里的页面标签全都显示出来了。这当然不是我想要的效果。

谷哥了一番,没想到在官网上就找到了我想要实现的效果,而实现的主角就是今天的 $compile 服务。

https://docs.angularjs.org/api/ng/service/$compile

节选一下关键部分内容,Javascript:

<script>
angular.module('compileExample', [], function($compileProvider) {
// configure new 'compile' directive by passing a directive
// factory function. The factory function injects the '$compile'
$compileProvider.directive('compile', function($compile) {
// directive factory creates a link function
return function(scope, element, attrs) {
scope.$watch(
function(scope) {
// watch the 'compile' expression for changes
return scope.$eval(attrs.compile);
},
function(value) {
// when the 'compile' expression changes
// assign it into the current DOM
element.html(value);
// compile the new DOM and link it to the current
// scope.
// NOTE: we only compile .childNodes so that
// we don't get into infinite loop compiling ourselves
$compile(element.contents())(scope);
}
);
};
});
})
.controller('GreeterController', ['$scope', function($scope) {
$scope.name = 'Angular';
$scope.html = 'Hello ';
}]);
</script>

Html:

<div ng-controller="GreeterController">
<input ng-model="name"> <br>
<textarea ng-model="html"></textarea> <br>
<div compile="html"></div>
</div>

总之就是用$compile服务创建一个directive ‘compile’,这个complie会将传入的html字符串或者DOM转换为一个template,然后直接在html里调用compile即可。

原文出处:http://gsgundam.com/2014-12-13-angularjs-compile-to-show-dymanic-html-content/

AngularJS 不得不了解的服务 $compile 用于动态显示html内容的更多相关文章

  1. inux中tail命令---用于查看文件内容

    linux中tail命令---用于查看文件内容 最基本的是cat.more和less.1. 如果你只想看文件的前5行,可以使用head命令,如:head -5 /etc/passwd2. 如果你想查看 ...

  2. linux命令之----sort命令用于将文本文件内容加以排序

    1.sort命令作用 sort命令用于将文本文件内容加以排序,将输入行按照键值字段与数据类型选项以及locale排序. 一个可预期的记录次序,会让用户的查看使用更方便:书的索引.字典.目录以及电话簿等 ...

  3. Visual Studio Code 帮助查看器,指定的用于安装帮助内容的位置无效,或者您无权访问该位置

    今天有个C# 类库文件里面的属性想要了解下,想到了Vs的帮助文档,其实也就是微软的MSDN:提示帮助查看器,指定的用于安装帮助内容的位置无效,或者您无权访问该位置: 最近两天vs也没有更新,并且也没有 ...

  4. AngularJS——第8章 服务

    第8章 服务 服务是一个对象或函数,对外提供特定的功能. 8.1 内建服务 1. $location是对原生Javascript中location对象属性和方法的封装. // $location内置服 ...

  5. AngularJS中实现日志服务

    本篇体验使用AngularJS自定义一个记录日志的服务. 在AngularJS中,服务的一些写法是这样的: var app = angular.module('app',[]); app.provid ...

  6. angularJS中如何写服务

    服务的用途 服务提供了一种能在应用的整个生命周期内保持数据的方法,它能够在控制器之间进行通信,并且能保证数据的一致性 服务提供了把特定功能相关联的方法集中在一起的接口 如何创建服务 angularJS ...

  7. angularJS module里的'服务'

    首先,为了举栗子,先写好如下的模型,控制器,html: html: <!DOCTYPE html> <html ng-app="serviceApp"> & ...

  8. 自定义AngularJS中的services服务

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  9. AngularJs(Part 3)--注册服务

    有以下5中方法注册一个AngularJS可以识别的Service value和constant是两个极其简单的方法,只有少数情况下会使用. service已经开始复杂了起来.而factory是我认为既 ...

随机推荐

  1. 最大流EK算法模板

    最近学了下最大流算法,大概思想算是懵懵懂懂了,现在想把模板记录下来,以备后面深刻学习之用. #include<cstdio> #include<cstring> using n ...

  2. Lenovo Y430P安装Linux无线网卡

    新买了一台Lenovo Y430P的笔记本,笔记本自带的无线网卡型号是BCM43142.安装了CentOS6.5的操作系统后,按照网上搜索到的网址http://zh-cn.broadcom.com/s ...

  3. GTW likes math(BC 1001)

    GTW likes math Accepts: 472 Submissions: 2140 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 1 ...

  4. Excel导出cs文件

    using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI ...

  5. php二分查找

    // 递归版本 function bin_sch($arr,$low,$high,$val) { if($low<$high){ $mid = intval(($low+$high)/2); i ...

  6. centos 6.5 安装 redis

    下载软件: wget wget http://download.redis.io/releases/redis-2.8.7.tar.gz 2.解压软件并编译安装: tar -zxvf redis-2. ...

  7. C语言的本质(38)——makefile之变量

    我们详细看看Makefile中关于变量的语法规则.先看一个简单的例子: foo = $(bar) bar = Huh? all: @echo$(foo) 我们执行make将会打出Huh?.当make读 ...

  8. UESTC_秋实大哥与小朋友 2015 UESTC Training for Data Structures<Problem A>

    A - 秋实大哥与小朋友 Time Limit: 3000/1000MS (Java/Others)     Memory Limit: 65535/65535KB (Java/Others) Sub ...

  9. UVA 11111-Generalized Matrioshkas(栈)

    题意:有很多层盒子,盒子里面再套盒子,一个盒子可能套多个独立的子盒子,但子盒子的总体积必须小于该盒子,否则不合法,输入给一行数,负数代表左边,正数代表右边,大小表示其体积,如-2,-1,1,2则表示体 ...

  10. mongoDB windows reinstall add auth

    Mongodb默认启动是不带认证,也没有账号,只要能连接上服务就可以对数据库进行各种操作,这样可不行.现在,我们得一步步开启使用用户和认证. 第一步,我们得定位到mongodb的安装目录.我本机的是C ...