转载自: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的更多相关文章

  1. angular中的compile和link函数

    angular中的compile和link函数 前言 这篇文章,我们将通过一个实例来了解 Angular 的 directives (指令)是如何处理的.Angular 是如何在 HTML 中找到这些 ...

  2. angular源码分析:angular中脏活累活的承担者之$interpolate

    一.首先抛出两个问题 问题一:在angular中我们绑定数据最基本的方式是用两个大括号将$scope的变量包裹起来,那么如果想将大括号换成其他什么符号,比如换成[{与}],可不可以呢,如果可以在哪里配 ...

  3. angular源码分析:angular中脏活累活承担者之$parse

    我们在上一期中讲 $rootscope时,看到$rootscope是依赖$prase,其实不止是$rootscope,翻看angular的源码随便翻翻就可以发现很多地方是依赖于$parse的.而$pa ...

  4. angularjs指令中的compile与link函数详解(转)

    http://www.jb51.net/article/58229.htm 通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link, ...

  5. 【转】angularjs指令中的compile与link函数详解

    这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下   通常大家在 ...

  6. angularjs指令中的compile与link函数详解

    这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下   通常大家在 ...

  7. angularjs指令中的compile与link函数详解补充

    通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. angularjs里的指令非常神奇,允许你 ...

  8. 【转】angular中$parse详解教程

    原文: https://yq.aliyun.com/ziliao/40516 ------------------------------------------------------------- ...

  9. angular 中引入 markdown

    ngx-markdown 是 Angular2+ 的一个第三方库,它的主要功能是将md文件转换为HTML格式,并且支持语法高亮. GITHUB地址:https://github.com/jfcere/ ...

随机推荐

  1. linux下修改jar中的文件

    解压修改后再打包 解压: jar xvf xxx.jar 打包: jar cvfm0 xxx.jar META-INF/MANIFEST.MF ./ 注: -m参数可以将 一个具体的mainfest文 ...

  2. Java 中的JSON 字符串

    类库选择 Java中并没有内置JSON的解析,因此使用JSON需要借助第三方类库. 下面是几个常用的 JSON 解析类库: Gson: 谷歌开发的 JSON 库,功能十分全面. FastJson: 阿 ...

  3. js根据数据条数与每页多少条数据计算页数,js前端计算页数

    /**  *根据数据条数与每页多少条数据计算页数   * totalnum 数据条数  * limit 每页多少条  */ function pageCount (totalnum,limit){   ...

  4. apk增加系统签名的方法

    1.命令行方法给apk加系统签名在Linux环境:java -Djava.library.path=. -jar signapk.jar platform.x509.pem platform.pk8 ...

  5. 阶段5 3.微服务项目【学成在线】_day18 用户授权_16-细粒度授权-我的课程细粒度授权-测试

    重启课程管理服务 刷新页面,令牌到期需要先登陆 首先拿到company的id 测试2号公司

  6. 阶段5 3.微服务项目【学成在线】_day07 课程管理实战_05-课程修改实战分析

    3 课程信息修改 3.1 需求分析 课程添加成功进入课程管理页面,通过课程管理页面修改课程的基本信息.编辑课程图片.编辑课程营销信息等. 本小节实现修改课程. 3.2 课程管理页面说明 3.2.1 页 ...

  7. 如何让在panel里的子窗体随panel的大小改变而变化?(转)

            private void Form1_Load(object sender, EventArgs e)         {             frm=new Form2();   ...

  8. MySQL学习笔记——MySQL5.7的启动过程(一)

    MySQL的启动函数在 sql/main.cc 文件中. main.cc: extern int mysqld_main(int argc, char **argv); int main(int ar ...

  9. Python3之使用枚举类

    当我们需要定义常量时,一个方法是用大写变量通过整数来定义,例如月份 JAN = 1 FEB = 2 MAR = 3 APR=4 May=5 Jun=6 Jul=7 Aug=8 Sep=9 Oct=10 ...

  10. VMware VSAN 设计规则

    1.集群节点数量:3-64台主机(生产环境最少4节点起,5.5版本支持32节点,6.0版本支持64节点),配置万兆网卡,主机规格应满足VSAN兼容性要求. 2.每台主机需配置磁盘组,每台主机的磁盘组数 ...