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>

转载于:https://www.cnblogs.com/wancy86/p/transclude.html

angularjs指令参数transclude相关推荐

AngularJS 指令实践指南（二）
这个系列教程的第一部分给出了AngularJS指令的基本概述,在文章的最后我们介绍了如何隔离一个指令的scope.第二部分将承接上一篇继续介绍.首先,我们会看到在使用隔离scope的情况下,如何从指令 ...
AngularJS指令范围中的#39;@#39;和#39;=#39;有什么区别？
本文翻译自:What is the difference between '@' and '=' in directive scope in AngularJS? I've read the Angu ...
angular学习笔记(三十)-指令(4)-transclude
from: http://www.cnblogs.com/liulangmao/p/3951865.html 本篇主要介绍指令的transclude属性: transclude的值有三个: 1.tra ...
【转】angularjs指令中的compile与link函数详解
这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下通常大家在使用 ...
AngularJS 指令
1. AngularJS指令的特点: AngularJS通过被称为指令的新属性来扩展HTML,指令的前缀为ng-. AngularJS通过内置的指令来为应用添加功能. AngularJS允许你自定义指 ...
AngularJS指令封装高德地图组件
2019独角兽企业重金招聘Python工程师标准>>> 1 概述公司移动门户原来是基于AngularJS指令封装的百度地图组件,用于签到.签退.定位等功能,在使用过程中发现百度地图 ...
如何调用AngularJS指令中定义的方法？
本文翻译自:How to call a method defined in an AngularJS directive? I have a directive, here is the code : ...
AngularJS学习笔记二:AngularJS指令
AngularJS 指令: AngularJS 通过被称为指令的新属性来扩展 HTML. AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. 几个常用指令: ng-app 指令 ...
软件测试 | 手把手教你快速掌握 Monkey 工具，指令参数+APK集合测试
做过压力测试的同朋友应该对monkey工具都不陌生! Monkey是AndroidSDK中附带的一个工具.可以运行在模拟器里或实际设备中.它向系统发送伪随机的用户事件流,实现对正在开发的应用进行压力( ...
Polymer元素和AngularJS指令有什么区别？
本文翻译自:What is the difference between Polymer elements and AngularJS directives? On the Polymer Getti ...

angularjs指令参数transclude

angularjs指令参数transclude

定义指令

使用

angularjs指令参数transclude相关推荐

最新文章

热门文章