angular : direative : scope | 指令scope和transclude的关系
今天记入的是指令的scope和transclude关系
a 和 b 都是指令
<div a> <div b></div> </div>
a transclude了b,b的$$prevSibling是a,而a的$$prevSibling不是b
<div a>
<div ng-transclude="">
<div b></div>
</div>
</div>
angular.module("Member", []).
directive("a", [function () {
return {
restrict: "A",
transclude : true,
template :"<div ng-transclude></div>",
link: function ($scope) {
console.log("a");
console.log($scope);
},
scope : true,
}
}]).
directive("b", [function () {
return {
restrict: "A",
link: function ($scope) {
console.log("b");
console.log($scope);
}
}
}])
问题来了:为什么使用ng-transclude会自动创建一个新的scope?而且是sibling?那我不会回答,但是如果我要继承指令a的scope该怎么办?
解决方案:https://github.com/angular/angular.js/issues/1809
angular.module("my").directive('myTransclude', function() {
return {
compile: function(tElement, tAttrs, transclude) {
return function(scope, iElement, iAttrs) {
transclude(scope.$new(), function(clone) {
iElement.append(clone);
});
};
}
};
});
那原本的ng-transclude替换成my-transclude就能解决sibling问题。
如果你需要指令b的scope不是自己的,你可以删除掉$new()
如果你需要指令a是隔离的,同时指令b的scope要是rootscope,你就用回ng-transclude吧~
angular : direative : scope | 指令scope和transclude的关系的更多相关文章
- angular : direative : scope | 指令scope里的符号@,=
先看看以下的代码 <body ng-app="app" ng-controller="ctrl"> <dir myname="nam ...
- AngularJS入门心得4——漫谈指令scope
上篇<AngularJS入门心得3——HTML的左右手指令>初步介绍了指令的概念和作用.已经和指令打过一个照面,就不会那么陌生了,今天主要介绍的是一个困扰了我很久终于想通的问题,这个问题与 ...
- angular : direative :comunication 指令之间的通讯
在网络上可以找到多种指令之间的通讯 · $on,$emit,$boardcast (向上或向下冒泡) · 指令return的required (^)向上一个scope通讯,前提要先给scope一个na ...
- AngularJS 全局scope与指令 scope通信
在项目开发时,全局scope 和 directive本地scope使用范围不够清晰,全局scope与directive本地scope通信掌握的不够透彻,这里对全局scope 和 directive本地 ...
- angularJS1笔记-(14)-自定义指令(scope)
index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- Angular的自定义指令以及实例
本文章已收录于: AngularJS知识库 分类: javascript(55) http://www.cnblogs.com/xiaoxie53/p/5058198.html 前面的文章介 ...
- angular directive自定义指令
先来看一下自定义指令的写法 app.directive('', ['', function(){ // Runs during compile return { // name: '', // pri ...
- 浅析AngularJS自定义指令之嵌入(transclude)
AngularJS自定义指令的嵌入功能与vue的插槽十分类似,都可以实现一些自定义内容展现.在开始之前先简单介绍下自定义指令的transclude属性和AngularJS的内置指令ng-transcl ...
- Angular内置指令(二)
目录: $rootScope,ng-app,.run(),ng-include,ng-repeat,ng-if,ng-switch,ng-init ng-show/ng-hide,ng-model,n ...
随机推荐
- linux在线预览pdf文件开发思路
准备:swftools,flexpaper 基本思路: 1,将pdf文件转化成swf文件 2,使用flexpaper预览swf文件 主要代码: 1,在linux中安装swftools.官网下载swft ...
- chkdsk
通过 Microsoft 的相关帮助就可以明白,例如对D盘进行操作,则: 示例1:chkdsk /? 显示帮助信息. 示例2:chkdsk d: 检查D盘的磁盘状态,报告磁盘错误. 示例3:chkds ...
- centos5.5 mount new harddisk
Linux 系统挂载数据盘 1.查看数据盘 使用"fdisk-l"命令查看 2. 对数据盘进行分区 执行"fdisk /dev/sdb"命令,对数据盘进行分区 ...
- JS的组成部分、引入页面的方法以及命名规范
JS的组成部分.引入页面的方法以及命名规范 一.页面是由三部分组成 1)html标签(超文本标记语言) 2)css样式(层叠样式表) 3)javascript脚本编程语言(动态脚本语言) 二.将c ...
- 屏蔽ps联网激活
屏蔽ps联网激活C:\Windows\system32\drivers\etc\host127.0.0.1 lm.licenses.adobe.com127.0.0.1 na1r.services.a ...
- 电商网站垮IDC数据备份,MySql主从同步,图片及其它数据文件的同步
原文网址:http://www.bzfshop.net/article/180.html 对一个电子商务网站而言,最宝贵的资源就是数据.服务器是很廉价的东西,即使烧了好几个也问题不大,但是用户数据如果 ...
- 使用AIR进行移动APP开发常见功能和问题(上)
1. 获取最近联系人 思路:侦听Geolocation的update事件,获取经度和纬度信息,再把坐标信息上传至服务器,服务器比较坐标信息算出距离,返回最近位置的若干个人. update时间在2种情 ...
- 如何用CSS快速布局(一)—— 布局元素详细
要快速进行网页排版布局,则必须对布局的元素有清晰的了解,才不会总是在细节处出错.这一篇先详解有关布局的因素作为布局基础:块级元素and内联元素.盒模型.准确定位.元素对齐.样式继承.下一篇则重点描述快 ...
- iOS多线程的七大对象理解
1用面向对象的观点去理解,进程和线程,同步和异步,并行和串行,还有主线程的主队列,的七者关系 进程:程序不运行时就是一堆代码,运行时就是一堆的进程的组合,进程是程序运行的基本单位. 线程:线程是进程的 ...
- Wireshark网络抓包(二)——过滤器
一.捕获过滤器 选中捕获选项后,就会弹出下面这个框,在红色输入框中就可以编写过滤规则. 1)捕获单个IP地址 2)捕获IP地址范围 3)捕获广播或多播地址 4)捕获MAC地址 5)捕获所有端口号 6) ...