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"/>&nbsp;' +
'<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'}];

AngularJS中的transclusion案例的更多相关文章

  1. 彻底弄懂AngularJS中的transclusion

    点击查看AngularJS系列目录 彻底弄懂AngularJS中的transclusion AngularJS中指令的重要性是不言而喻的,指令让我们可以创建自己的HTML标记,它将自定义元素变成了一个 ...

  2. AngularJS中module的导入导出

    关于AngularJS中module的导入导出,在Bob告诉我之前还没写过,谢谢Bob在这方面的指导,给到我案例代码. 在AngularJS实际项目中,我们可能需要把针对某个领域的各个方面放在不同的m ...

  3. AngularJS中transclude用法详解

    这篇文章主要介绍了AngularJS中transclude用法,详细分析了transclude的具体功能.使用技巧与相关注意事项,需要的朋友可以参考下 本文实例讲述了AngularJS中transcl ...

  4. AngularJS中get请求URL出现跨域问题

    今天早上帮助同学看了一个AngularJS的问题,主要是请求中出现了跨域访问,请求被阻止. 下面是她给我的代码: <html lang="en" ng-app="m ...

  5. AngularJS 中的Promise --- $q服务详解

    先说说什么是Promise,什么是$q吧.Promise是一种异步处理模式,有很多的实现方式,比如著名的Kris Kwal's Q还有JQuery的Deffered. 什么是Promise 以前了解过 ...

  6. AngularJS中的表单验证

    AngularJS中的表单验证 AngularJS自带了很多验证,什么必填,最大长度,最小长度...,这里记录几个有用的正则式验证 1.使用angularjs的表单验证 正则式验证 只需要配置一个正则 ...

  7. 关于angularjs中的jQuery

    关于angularjs中的jQuery 下面是一个小例子,用来说明我经常看到的一种模式.我们需要一个开关型的按钮.(注意:这个例子的代码有点装逼,并且有点冗长,只是为了用来代表更加复杂一些的例子,这些 ...

  8. angularjs中的directive scope配置

    angularjs中的directive scope配置 定义directive其中重要的一环就是定义scope,scope有三种形式: 默认的scope,DOM元素上原有的scope scope: ...

  9. angularjs中provider,factory,service的区别和用法

    angularjs中provider,factory,service的区别和用法 都能提供service,但是又有差别 service 第一次被注入时实例化,只实例化一次,整个应用的生命周期中是个单例 ...

随机推荐

  1. Log4j maven依赖配置

    做项目的时候,经常需要给应用打印日志,LOG4J是我们的不二选择,项目管理使用maven构建时,pom.xml配置如下 <!--日志 start--> <dependency> ...

  2. xshell xftp免费版下载方法

    第一步:进入官网 https://www.netsarang.com/ 第二步:选中Free License 第三步:选中你要下的xftp或者xsell (l两个好像不能一块下,都要单独操作) 第四步 ...

  3. C++ code:数组初始化

    具有初始化的数组定义,其元素个数可以省略,即方括号中的表达式可以省略.这时候,最后确定的元素个数取决于初始化值的个数.例如: #include<iostream> using namesp ...

  4. linux 终端上网设置

    原网址: https://www.aliyun.com/jiaocheng/215068.html 摘要:第一步,需要安装一个名为w3m的软件工具,打开终端,输入如下命令sudoapt-getinst ...

  5. bootstrap----屏幕大小切换

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Ubuntu安装VirtualBox以及CentOS7.5联网设置

    一.virtualBox的安装 官方Liunx版本下载地址:  https://www.virtualbox.org/wiki/Linux_Downloads 这里选择下载ubuntu 16.04  ...

  7. C#对Windows文件/文件夹/目录的一些操作总结

    1.   在一个目录下创建一个文件夹 if (!System.IO.Directory.Exists(path)) System.IO.Directory.CreateDirectory(path); ...

  8. Codeforces 815C Karen and Supermarket 树形dp

    Karen and Supermarket 感觉就是很普通的树形dp. dp[ i ][ 0 ][ u ]表示在 i 这棵子树中选择 u 个且 i 不用优惠券的最小花费. dp[ i ][ 1 ][ ...

  9. 6-3 矩阵链成 uva 442

    较为简单的栈题 思路比较好 一次ac 1.char word :word=A:直接  a[word]=xxxx,不用 a[‘word’]=xxxx #include<bits/stdc++.h& ...

  10. 5.Django|模型层--多表关系

    多表操作 文件为 ---->  orm2 数据库表关系之关联字段与外键约束 一对多Book id title price publish email addr php 人民出版社 北京 pyth ...