指令 scope
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div ng-controller="c1" ng-init="c11='c11'">
{{c11}}
<div ng-controller="c2" ng-init="c21='c21'">
<div>{{c21}}</div>
<div d2></div>
<div ng-controller="c3" ng-init="c31='c31'">
<div>{{c31}}</div>
<div d3></div>
</div>
</div>
</div>
<script src="angular.min.js"></script>
<script>
angular.module('myApp', [])
.controller('c1', function($scope) {
})
.controller('c2', function($scope) {
})
.controller('c3', function($scope) {
})
.directive('d3', function() {
return {
restrict: 'A',
scope: false, // 默认
template: '<div>{{c11}} {{c21}} {{c31}}</div>',
controller: function($scope, $element, $attrs, $transclude) {
$scope.c31 = 'c31c'
}
};
})
.directive('d2', function() {
return {
restrict: 'A',
scope: true,
template: '<div>{{c11}} {{c21}}</div>',
controller: function($scope, $element, $attrs, $transclude) {
$scope.c21 = 'c21c'
}
};
})
</script>
</body>
</html>
@
<!DOCTYPE html>
<html ng-app="dirAppModule">
<head>
<title></title>
<meta charset="utf-8">
<script src="angular.min.js"></script>
<script type="text/ng-template" id="text.html">
<div>
<h3 style="background-color:{{color}}" ng-transclude></h3>
</div>
</script>
<script>
var appModule = angular.module('dirAppModule', []);
appModule.controller('bgColor',function($scope){});
appModule.directive('cdHello',function() {
return {
restrict:'EAC',
templateUrl:'text.html',
replace:true,
transclude:'element',
scope:{
color:'@colAttr'
},
link:function(scope,ele,attrs,ctrl,trans) {
ele.bind('click',function() {
scope.$apply(function() {
scope.color = '#C0DCC0';
})
})
ele.bind('mouseover',function() {
ele.css({'cursor':'pointer'})
})
}
}
})
</script>
</head>
<body>
<div ng-controller="bgColor">
<input ng-model="color" placeholder="请输入颜色值"/>
<br/>
<cd-hello col-attr="{{color}}"><span>code_bunny</span></cd-hello>
</div>
</body>
</html>
=
@绑定是col-attr="{{color}}",而=绑定是bg-color="color".一个是"{{color}}",一个是"color".
<!DOCTYPE html>
<html ng-app="dirAppModule">
<head>
<title></title>
<meta charset="utf-8">
<script src="angular.min.js"></script>
<script type="text/ng-template" id="text.html">
<div>
<h3 style="color:{{text_color}};background-color:{{color}}" ng-transclude></h3>
</div>
</script>
<script>
var appModule = angular.module('dirAppModule', []);
appModule.controller('bgColor',function($scope){});
appModule.directive('cdHello',function(){
return {
restrict:'EAC',
templateUrl:'text.html',
replace:true,
transclude:'element',
scope:{
color:'=bgColor'
},
link:function(scope,ele,attrs,ctrl,trans){
ele.bind('click',function(){
scope.$apply(function(){
scope.color = '#C0DCC0'
})
});
ele.bind('mouseover',function(){
ele.css({'cursor':'pointer'})
});
}
}
});
</script>
</head>
<body>
<div ng-controller="bgColor">
<input ng-model="color" placeholder="请输入颜色值"/>
<br/>
<cd-hello bg-color="color"><span>code_bunny</span></cd-hello>
</div>
</body>
</html>
指令 scope的更多相关文章
- AngularJS入门心得4——漫谈指令scope
上篇<AngularJS入门心得3——HTML的左右手指令>初步介绍了指令的概念和作用.已经和指令打过一个照面,就不会那么陌生了,今天主要介绍的是一个困扰了我很久终于想通的问题,这个问题与 ...
- angular : direative : scope | 指令scope和transclude的关系
今天记入的是指令的scope和transclude关系 a 和 b 都是指令 <div a> <div b></div> </div> a transc ...
- angularJS自定义指令scope代替link
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- angular : direative : scope | 指令scope里的符号@，=
先看看以下的代码 <body ng-app="app" ng-controller="ctrl"> <dir myname="nam ...
- 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自定义指令directive:scope属性
在AngularJS中,除了内置指令如ng-click等,我们还可以自定义指令.自定义指令,是为了扩展DOM元素的功能.代码中,通过指定directive中的restrict属性,来决定这个指令是作为 ...
- angularjs指令中scope参数 true、false、{} 的区别详解
scope 有三个参数 true.false.{} scope 默认是 false,当 scope设置为true时,会从父作用域继承并创建一个新的作用域对象, 按照true .false的反向思维,我 ...
- angular学习笔记(三十)-指令(8)-scope
本篇讲解指令的scope属性: scope属性值可以有三种: 一.scope:false 默认值,这种情况下,指令的作用域就是指令元素当前所在的作用域. 二.scope:true 创建一个继承了父作用 ...
随机推荐
- Wix: Using Patch Creation Properties - Small Update
Source Reference: wix help document -- WiX Toolset License Using Patch Creation Properties A patch ...
- T-SQL
今天继续数据库知识的梳理.接下来的主要内容是T-SQL,针对的数据库是SQL Server 2008. 几个术语 数据定义语言(DDL,Data Definition Language):用来建立数据 ...
- 支付宝api教程，支付宝根据交易号自动充值
最近公司要用php做一个网站支付宝自动充值的功能,具体就是客户把钱直接转到公司的支付宝账号里,然后在我们网站上填写上交易号,我们网站程序自动获取交易信息,自动给网站的账户充值. 我的具体想法就是利用支 ...
- jQuery Mobile里xxx怎么用呀？(缓存篇)
jQuery Mobile初始页面DOM Cache所引发的问题 HTML元素事件多次触发: jsFiddle: http://jsfiddle.net/gn9JA/2/ cause: 在jsFidd ...
- table隔行换色
以前做表格隔行换色,是在tr上添加不同的背景色,但在程序开发的过程需要做判断,不够方便,而且生成的代码也比较多,现在的需求逐渐修改为JQ去控制简洁的表格去显示隔行换色 <script type= ...
- JQ方法大全
Dom:Attribute:$("p").addClass(css中定义的样式类型); 给某个元素添加样式$("img").attr({src:"te ...
- 用Unity的Animation播放Animator动画Clip
简单的动画,其实不需要Animator动画状态机管理,用Animation播放效率更高,但可能由于历史遗留问题,或网上下载的第三方资源,得到的是Animator资源,可以在Clip的Debug试图下, ...
- OpenFileDialog组件打开文件....待续
1.常用属性 InitialDirectory 对话框的初始目录 this.openFileDialog1.InitialDirectory = "d:\\"; ...
- 蜗牛历险记(二) Web框架(中)
上篇简单介绍了框架所使用的Autofac,采用Autofac提供的Ioc管理整个Web项目中所有对象的生命周期,实现框架面向接口编程.接下来介绍框架的日志系统. 一.介绍之前 框架日志是否有存在的必要 ...
- 一步步学习ASP.NET MVC3 (12)——FileResult
请注明转载地址:http://www.cnblogs.com/arhat 忙了两天,本来老魏昨天就应该写出新的文章,但是由于昨天雨夹雪而且加上昨天晚上加了班,到家都没饭吃了,一看时间都9点了,什么饭店 ...