博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
AngularJS参数transclude
阅读量:7108 次
发布时间:2019-06-28

本文共 1331 字,大约阅读时间需要 4 分钟。

hot3.png

 

    transclude是一个可选的参数。如果设置了,其值必须为true,它的默认值是false。

嵌入有时被认为是一个高级主题,但某些情况下它与我们刚刚学习过的作用域之间会有非常 好的配合。使用嵌入也会很好地扩充我们的工具集,特别是在创建可以在团队、项目、AngularJS 社区之间共享的HTML代码片段时。嵌入通常用来创建可复用的组件,典型的例子是模态对话框或导航栏。

 

    我们可以将整个模板,包括其中的指令通过嵌入全部传入一个指令中。这样做可以将任意内 容和作用域传递给指令。transclude参数就是用来实现这个目的的,指令的内部可以访问外部 指令的作用域,并且模板也可以访问外部的作用域对象。

    为了将作用域传递进去,scope参数的值必须通过{}或true设置成隔离作用域。如果没有设 置scope参数,那么指令内部的作用域将被设置为传入模板的作用域。

    嵌入允许指令的使用者方便地提供自己的HTML模板,其中可以包含独特的状态和行为,并对指令的各方面进行自定义。下面一起来实现个小例子,创建一个可以被自定义的可复用指令。

    我们来创建一个可以复用的侧边栏,同WordPress博客的侧边栏很相似。我们希望可以保持CSS样式的一致性,同时又希望可以在复用时尽量少写HTML代码。

    例如,假设我们想创建一个包括标题和少量HTML内容的侧边栏,如下所示 

  • First link
  • Second link


 这段代码告诉AngularJS编译器,将它从DOM元素中获取的内容放到它发现ng-transclude 指令的地方。

 借助transclusion,我们可以将指令复用到第二个元素上,而无须担心样式和布局的一致 性问题。

 例如,下面的代码会产生两个样式完全一致的侧边栏

 

  • First link
  • Second link


 

以上文章来源于《Angular权威教程》 p82

转载于:https://my.oschina.net/skymozn/blog/504970

你可能感兴趣的文章
jvm学习-垃圾收集
查看>>
linux用文件锁实现保证一个程序只能启动一个进程
查看>>
使用wget工具抓取网页和图片
查看>>
linux下oracle开机启动
查看>>
【Linux命令】对抗遗忘 -ls 命令系列
查看>>
MyEclipse launch configuration 的清除
查看>>
各大互联网公司架构演进之路汇总
查看>>
js 改变地址栏中的url
查看>>
rsync+inotify
查看>>
我的友情链接
查看>>
F5 wireshark plugin
查看>>
MySQL企业版之优势
查看>>
我的友情链接
查看>>
Tiny分布式计算框架开源了
查看>>
mongo学习-基础知识
查看>>
Android TextView中文字通过SpannableString来设置超链接、颜色、字体等属性
查看>>
2016的个人总结
查看>>
python __file__ 和 sys.argv[0] 的区别
查看>>
异常捕获不抛出,Spring事务无法回滚
查看>>
小蚂蚁学习数据结构(9)——递归
查看>>