AngularJS中的transclusion案例
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'}];
AngularJS中的transclusion案例的更多相关文章
- 彻底弄懂AngularJS中的transclusion
点击查看AngularJS系列目录 彻底弄懂AngularJS中的transclusion AngularJS中指令的重要性是不言而喻的,指令让我们可以创建自己的HTML标记,它将自定义元素变成了一个 ...
- AngularJS中module的导入导出
关于AngularJS中module的导入导出,在Bob告诉我之前还没写过,谢谢Bob在这方面的指导,给到我案例代码. 在AngularJS实际项目中,我们可能需要把针对某个领域的各个方面放在不同的m ...
- AngularJS中transclude用法详解
这篇文章主要介绍了AngularJS中transclude用法,详细分析了transclude的具体功能.使用技巧与相关注意事项,需要的朋友可以参考下 本文实例讲述了AngularJS中transcl ...
- AngularJS中get请求URL出现跨域问题
今天早上帮助同学看了一个AngularJS的问题,主要是请求中出现了跨域访问,请求被阻止. 下面是她给我的代码: <html lang="en" ng-app="m ...
- AngularJS 中的Promise --- $q服务详解
先说说什么是Promise,什么是$q吧.Promise是一种异步处理模式,有很多的实现方式,比如著名的Kris Kwal's Q还有JQuery的Deffered. 什么是Promise 以前了解过 ...
- AngularJS中的表单验证
AngularJS中的表单验证 AngularJS自带了很多验证,什么必填,最大长度,最小长度...,这里记录几个有用的正则式验证 1.使用angularjs的表单验证 正则式验证 只需要配置一个正则 ...
- 关于angularjs中的jQuery
关于angularjs中的jQuery 下面是一个小例子,用来说明我经常看到的一种模式.我们需要一个开关型的按钮.(注意:这个例子的代码有点装逼,并且有点冗长,只是为了用来代表更加复杂一些的例子,这些 ...
- angularjs中的directive scope配置
angularjs中的directive scope配置 定义directive其中重要的一环就是定义scope,scope有三种形式: 默认的scope,DOM元素上原有的scope scope: ...
- angularjs中provider,factory,service的区别和用法
angularjs中provider,factory,service的区别和用法 都能提供service,但是又有差别 service 第一次被注入时实例化,只实例化一次,整个应用的生命周期中是个单例 ...
随机推荐
- Log4j maven依赖配置
做项目的时候,经常需要给应用打印日志,LOG4J是我们的不二选择,项目管理使用maven构建时,pom.xml配置如下 <!--日志 start--> <dependency> ...
- xshell xftp免费版下载方法
第一步:进入官网 https://www.netsarang.com/ 第二步:选中Free License 第三步:选中你要下的xftp或者xsell (l两个好像不能一块下,都要单独操作) 第四步 ...
- C++ code:数组初始化
具有初始化的数组定义,其元素个数可以省略,即方括号中的表达式可以省略.这时候,最后确定的元素个数取决于初始化值的个数.例如: #include<iostream> using namesp ...
- linux 终端上网设置
原网址: https://www.aliyun.com/jiaocheng/215068.html 摘要:第一步,需要安装一个名为w3m的软件工具,打开终端,输入如下命令sudoapt-getinst ...
- bootstrap----屏幕大小切换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Ubuntu安装VirtualBox以及CentOS7.5联网设置
一.virtualBox的安装 官方Liunx版本下载地址: https://www.virtualbox.org/wiki/Linux_Downloads 这里选择下载ubuntu 16.04 ...
- C#对Windows文件/文件夹/目录的一些操作总结
1. 在一个目录下创建一个文件夹 if (!System.IO.Directory.Exists(path)) System.IO.Directory.CreateDirectory(path); ...
- Codeforces 815C Karen and Supermarket 树形dp
Karen and Supermarket 感觉就是很普通的树形dp. dp[ i ][ 0 ][ u ]表示在 i 这棵子树中选择 u 个且 i 不用优惠券的最小花费. dp[ i ][ 1 ][ ...
- 6-3 矩阵链成 uva 442
较为简单的栈题 思路比较好 一次ac 1.char word :word=A:直接 a[word]=xxxx,不用 a[‘word’]=xxxx #include<bits/stdc++.h& ...
- 5.Django|模型层--多表关系
多表操作 文件为 ----> orm2 数据库表关系之关联字段与外键约束 一对多Book id title price publish email addr php 人民出版社 北京 pyth ...