AngularJS中的transclusion案例
案例 angularjs
2023-09-11 14:16:51 时间
AngularJS中的transclusion类似于包含关系。
通常,这样定义一个directive:
<mydirective someprop=""></mydirective>
转换成html可能是这样的:
<div>
<div class="someclass">
</div
</div>
现在,想在类名为someclass的div中放置一些动态内容,即:
<div>
<div class="someclass">
这里有一些动态内容
</div
</div>
如何做到呢?
1、在template中通过属性或者元素的方式标记放置动态内容的位置,比如<ng-transclude></ng-transclude>
2、在directive的返回对象中增加transclude: true
假设,有这样的一个Directive:
(function(){ var transclusion = function(){ var template = '<div>Name:<input type="text" ng-model="vm.title"/> ' + '<button ng-click="vm.addTask()">Add Task</button>' + '<div class="taskContainer"><br/>' + '<ng-transclude></ng-transclude>' + '</div></div>', controller = function(){ var vm = this; vm.addTask = function(){ if(!vm.tasks) vm.task = []; vm.tasks.push({ title: vm.title }); } }; return { restrict: 'E', transclude: true, scope: { tasks:'=' }, controller: controller, controllerAs: 'vm',] bindToController: true, template: template } }; angular.module('direcitiveModule') .directive('transclusion', transclusion); }());
在页面大致这样使用:
<transclusion tasks="tasks"> <div ng-repeat="task in tasks track by $index"> <strong>{{task.title}}</strong> </div> </transclusion> $scope.tasks = [{title: 'Task 1'}];
相关文章
- 代码重构(六):代码重构完整案例
- 阿里慢SQL治理5大经典案例
- RMAN异机恢复遭遇ORA-01547、ORA-01152、ORA-01110错误案例
- [AngularJS + Webpack] Using Webpack for angularjs
- AIDL 定向tag IPC 案例 MD
- spss进行判别分析步骤_spss判别分析结果解释_spss判别分析案例详解
- Angularjs学习---官方phonecat实例学习angularjs step0 step1
- Angularjs学习---angularjs环境搭建,ubuntu 12.04下安装nodejs、npm和karma
- javascript案例29——求1~100累加和,跳过个位数为3的数。
- javascript案例2——页面时钟
- DataScience:数据处理技术之针对时间序列数据衍变—构造时间滑动窗口数据的简介、代码实现、案例应用之详细攻略
- Database之SQL:SQL在线编程、工作中常用SQL代码实践(以语法为导向的增、删、改、查,已基本涵盖所有语法案例)之详细攻略
- 【Nginx 源码学习】内存池 及 优秀案例赏析:Nginx内存池设计