在Angular中使用$ compile
转载自:http://odetocode.com/blogs/scott/archive/2014/05/07/using-compile-in-angular.aspx
在AngularJS中创建一个自定义指令很容易,我们从HTML开始一个简单的例子。
{{ message }}
<div otc-dynamic></div>
上述标记正在使用一个名为otcDynamic的指令,它只提供一个模板。
app.directive("otcDynamic", function(){
return {
template:"<button ng-click='doSomething()'>{{label}}</div>"
};
});
当与控制器组合时,演示文稿将允许用户单击按钮以查看屏幕上显示的消息。
app.controller("mainController", function($scope){ $scope.label = "Please click";
$scope.doSomething = function(){
$scope.message = "Clicked!";
}; });
使其动态
接下来,假设otcDynamic指令不能使用静态模板。该指令需要查看一些布尔标志,用户数据或服务信息,并动态构建模板标记。在下面的例子中,我们只会模拟这种情况。我们仍然使用静态字符串,但我们假装我们动态地创建了这个字符串,并使用element.html将标记放入DOM中。
app.directive("otcDynamic", function(){
return {
link: function(scope, element){
element.html("<button ng-click='doSomething()'>{{label}}</button>");
}
};
});
上述示例不再正常运行,只能向用户呈现显示文字文字{{label}}的按钮。
标记必须经过Angular的编译阶段来查找和激活诸如ng-click和{{label}}的指令。
汇编
$ compile服务是用于编译的服务。调用$ compile对标记将产生一个函数,您可以使用该函数将标记绑定到特定的范围(Angular称为链接函数)。链接后,您可以将DOM元素放入浏览器。
app.directive("otcDynamic", function($compile){
return{
link: function(scope, element){
var template = "<button ng-click='doSomething()'>{{label}}</button>";
var linkFn = $compile(template);
var content = linkFn(scope);
element.append(content);
}
}
});
如果您需要$编译以响应元素事件,例如单击事件或其他非角色代码,则需要调用$ apply来适用范围生命周期。
app.directive("otcDynamic", function($compile) { var template = "<button ng-click='doSomething()'>{{label}}</button>"; return{
link: function(scope, element){
element.on("click", function() {
scope.$apply(function() {
var content = $compile(template)(scope);
element.append(content);
})
});
}
}
});
在Angular中使用$ compile的更多相关文章
- angular中的compile和link函数
angular中的compile和link函数 前言 这篇文章,我们将通过一个实例来了解 Angular 的 directives (指令)是如何处理的.Angular 是如何在 HTML 中找到这些 ...
- angular源码分析:angular中脏活累活的承担者之$interpolate
一.首先抛出两个问题 问题一:在angular中我们绑定数据最基本的方式是用两个大括号将$scope的变量包裹起来,那么如果想将大括号换成其他什么符号,比如换成[{与}],可不可以呢,如果可以在哪里配 ...
- angular源码分析:angular中脏活累活承担者之$parse
我们在上一期中讲 $rootscope时,看到$rootscope是依赖$prase,其实不止是$rootscope,翻看angular的源码随便翻翻就可以发现很多地方是依赖于$parse的.而$pa ...
- angularjs指令中的compile与link函数详解(转)
http://www.jb51.net/article/58229.htm 通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link, ...
- 【转】angularjs指令中的compile与link函数详解
这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下 通常大家在 ...
- angularjs指令中的compile与link函数详解
这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下 通常大家在 ...
- angularjs指令中的compile与link函数详解补充
通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. angularjs里的指令非常神奇,允许你 ...
- 【转】angular中$parse详解教程
原文: https://yq.aliyun.com/ziliao/40516 ------------------------------------------------------------- ...
- angular 中引入 markdown
ngx-markdown 是 Angular2+ 的一个第三方库,它的主要功能是将md文件转换为HTML格式,并且支持语法高亮. GITHUB地址:https://github.com/jfcere/ ...
随机推荐
- linux下修改jar中的文件
解压修改后再打包 解压: jar xvf xxx.jar 打包: jar cvfm0 xxx.jar META-INF/MANIFEST.MF ./ 注: -m参数可以将 一个具体的mainfest文 ...
- Java 中的JSON 字符串
类库选择 Java中并没有内置JSON的解析,因此使用JSON需要借助第三方类库. 下面是几个常用的 JSON 解析类库: Gson: 谷歌开发的 JSON 库,功能十分全面. FastJson: 阿 ...
- js根据数据条数与每页多少条数据计算页数,js前端计算页数
/** *根据数据条数与每页多少条数据计算页数 * totalnum 数据条数 * limit 每页多少条 */ function pageCount (totalnum,limit){ ...
- apk增加系统签名的方法
1.命令行方法给apk加系统签名在Linux环境:java -Djava.library.path=. -jar signapk.jar platform.x509.pem platform.pk8 ...
- 阶段5 3.微服务项目【学成在线】_day18 用户授权_16-细粒度授权-我的课程细粒度授权-测试
重启课程管理服务 刷新页面,令牌到期需要先登陆 首先拿到company的id 测试2号公司
- 阶段5 3.微服务项目【学成在线】_day07 课程管理实战_05-课程修改实战分析
3 课程信息修改 3.1 需求分析 课程添加成功进入课程管理页面,通过课程管理页面修改课程的基本信息.编辑课程图片.编辑课程营销信息等. 本小节实现修改课程. 3.2 课程管理页面说明 3.2.1 页 ...
- 如何让在panel里的子窗体随panel的大小改变而变化?(转)
private void Form1_Load(object sender, EventArgs e) { frm=new Form2(); ...
- MySQL学习笔记——MySQL5.7的启动过程(一)
MySQL的启动函数在 sql/main.cc 文件中. main.cc: extern int mysqld_main(int argc, char **argv); int main(int ar ...
- Python3之使用枚举类
当我们需要定义常量时,一个方法是用大写变量通过整数来定义,例如月份 JAN = 1 FEB = 2 MAR = 3 APR=4 May=5 Jun=6 Jul=7 Aug=8 Sep=9 Oct=10 ...
- VMware VSAN 设计规则
1.集群节点数量:3-64台主机(生产环境最少4节点起,5.5版本支持32节点,6.0版本支持64节点),配置万兆网卡,主机规格应满足VSAN兼容性要求. 2.每台主机需配置磁盘组,每台主机的磁盘组数 ...