angularjs指令参数transclude

transclude翻译为嵌入,和之前看到的vue中的slots作用差不多,目的是将指令元素的子内容嵌入到指令的模板中

定义指令

<div sidebox title="Links">
<ul>
<li>First link</li>
<li>Second link</li>
</ul>
</div>
<script>
angular.module('myApp', [])
.directive('sidebox', function() {
return {
restrict: 'EA',
scope: {
title: '@'
},
transclude: true,
template: '<div class="sidebox">\
<div class="content">\
<h2 class="header">{{ title }}</h2>\
<span class="content" ng-transclude>\
</span>\
</div>\
</div>'
}; });
</script>

使用

下面会将div的内容嵌入带指令的模板中显示而达到自定义列表的效果,我们用的弹出层对话框就是这样实现的

<sidebox>
<div sideboxtitle="Links">
<ul>
<li>First link</li>
<li>Second link</li>
</ul>
</div>
</sidebox> <sidebox>
<div sideboxtitle="TagCloud">
<div class="tagcloud">
<a href="#">Graphics</a>
<a href="#">AngularJS</a>
<a href="#">D3</a>
<a href="#">Front-end</a>
<a href="#">Startup</a>
</div>
</div>
</sidebox>

angularjs指令参数transclude的更多相关文章

  1. angularjs指令(二)

    最近学习了下angularjs指令的相关知识,也参考了前人的一些文章,在此总结下. 欢迎批评指出错误的地方.   Angularjs指令定义的API AngularJs的指令定义大致如下 angula ...

  2. AngularJs指令(一)

    AngularJs应用现在越来越流行了,谷歌都与微软合作支持AngularJS2.0,这是要逆天了,说明AngularJs将来大势所趋.最近想跳槽,又重新拾起了AngluarJs(之前由于缺少项目应用 ...

  3. angularjs作用域之transclude

    transclude是一个可选的参数.如果设置了,其值必须为true,它的默认值是false.嵌入有时被认为是一个高级主题,但某些情况下它与我们刚刚学习过的作用域之间会有非常好的配合.使用嵌入也会很好 ...

  4. AngularJS 指令生命周期 complie link

    AnguarJS指令从解析到生效一共会经历Inject.Compile.Controller加载.Pre-link.Post-link这几个主要阶段. 一.AngularJS指令执行过程 1.加载An ...

  5. AngularJS 指令实践指南(二)

    这个系列教程的第一部分给出了AngularJS指令的基本概述,在文章的最后我们介绍了如何隔离一个指令的scope.第二部分将承接上一篇继续介绍.首先,我们会看到在使用隔离scope的情况下,如何从指令 ...

  6. AngularJS 指令(Directivce )一

    指令(Directive),是AngularJS中一块比较重要的内容,在实践中,我们提倡将控制器(Controller)写得短小精悍,逻辑代码尽量少,要实现这种目的,我们主要通过将逻辑代码抽取到服务( ...

  7. angularjs 指令—— 绑定策略(@、=、&)

    angularjs 指令—— 绑定策略(@.=.&) 引入主题背景:angular 的指令配置中的template可以直接使用硬编码写相应的代码,不过也可以根据变量,进行动态更新.那么需要用到 ...

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

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

  9. AngularJS指令进阶 – ngModelController详解

    AngularJS指令进阶 – ngModelController详解 在自定义Angular指令时,其中有一个叫做require的字段,这个字段的作用是用于指令之间的相互交流.举个简单的例子,假如我 ...

随机推荐

  1. TFS 分支导致nuget项目依赖丢失

    问题: 项目的代码 在tfs上分支后,签出项目.编译时发现无法编译,原有的nuget来的包的dll都丢失了(项目签入时,默认会忽略dll) 在网上找了下,发现一个简单的解决方法: 在"程序包 ...

  2. 测试--easymock的使用

    使用场景:对于调用其它类中的方法,但是还没有编写完,使用easymock进行单元测试,它提供这些没有编写完的代码期待的默认值. 使用步骤: step1: pom引入: <dependency&g ...

  3. 泛型的排序问题(Collections.sort及Comparable的应用)

    一.前言    java中对泛型(集合类型)排序的问题,主要采用了两张方式一种是对要排序的实体类,实现Comparable接口,另一种方式,Collections集合工具类进行排序. 二.实现Comp ...

  4. T-SQL Recipes之Dynamic PIVOT and UNPIVOT

    PIVOT PIVOT在行转列的时候经常用到,最便捷的方式就是通过示例来理解它的作用. 示例1 Query to Return Select Product Data from AdventureWo ...

  5. XDocument获取指定节点

    string xmlFile = @"D:\Documents\Visual Studio 2013\Projects\Jesee.Web.Test\ConsoleApplication1\ ...

  6. 设置Flush刷新模式setFlushMode()

    参考 http://blog.csdn.net/superdog007/article/details/38852399 FlushMode的枚举值: FlushMode.ALWAYS:任务一条SQL ...

  7. C#按照指定长度分割中英文字符串

    最近有一个需求:玩家发的不同长度文字,需要自适应行数. 初步实现想法很简单,直接获取字符数均分行数,再利用string.substring()切割即可.但是显而易见,由于一般字体下,中文显示宽度一般是 ...

  8. 解决Unity5+Vuforia+Network本地联机发布到Android上白屏的问题

    Unity5+Vuforia+Network本地联机,在Android下点击联机,然后识别模型就出现白屏,点击屏幕上相应位置的按钮(已白屏,但点击该看不见的按钮)还是能起作用,如跳转到其他场景正常. ...

  9. js_截取Url值

    "total" -->传递参数时的名字 var reg = new RegExp("(^|&)" + "total" + &q ...

  10. SQL Server 求结果

    ;with cte as ( select  CONVERT(DATE, DATEADD(DAY, -9, GETDATE())) as paytime union all select datead ...