指令 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 创建一个继承了父作用 ...
随机推荐
- Famount game manufacuters
一.Valve「美国」 1.Valve「中文意:阀门」の来源 REFRE.Valve官网 REFER.a history of valve's opening logos REFER.theguyin ...
- 学习C++ Primer 的个人理解（八）
结束了第一部分,在最后的第七章,我只简单的总结了一下,因为后面还会更详细的说明有关类的内容.而且说实在的这一张的内容让我很不舒服,验证了本书实际上有许多内容是作者的学生一起拼凑而成的.第七章结构给我感 ...
- Java异常（1）
一.要达到的效果 如果出现错误而是某些操作没有完成,程序应该: (1)返回到一种安全状态,并能够让用户执行一些其他的命令. (2)允许用户保存所有操作的结果,并以适当的方式终止程序. 异常处理的任 ...
- HDOJ 1176 免费馅饼 -- 动态规划
题目地址:http://acm.hdu.edu.cn/showproblem.php?pid=1176 Problem Description 都说天上不会掉馅饼,但有一天gameboy正走在回家的小 ...
- ExecutorService 接口
先看一个Executor接口,该接口只有一个方法:void execute(Runnable command),用于在未来某个时刻提交一个command,这个command可以被提交到一个新的线程,或 ...
- spring 中的<aop:advisor>和<aop:aspect>的区别
在AOP中有几个概念: — 方面(Aspect):一个关注点的模块化,这个关注点实现可能另外横切多个对象.事务管理是J2EE应用中一个很好的横切关注点例子.方面用Spring的Advisor或拦截器实 ...
- Newtonsoft.Json.dll解析json的dll文件使用
要解析的json //解析前 //解析前 {,,,,,,,,,,},,,,,,,,,,,},,,,,,,,,,,,,,,,},,,,,,,,,},,,,,,,,,,,,},,,,,,,,,,,},,, ...
- ColorDialog组件设置字体颜色
1.设置颜色 private void button4_Click(object sender, EventArgs e) { this.colorDialog1.ShowDialog(); this ...
- HTTP - PUT 上传文件/Shell （二）
上一篇文章 HTTP - PUT 上传文件/Shell 讲到自己搭了一个环境,去测试HTTP - PUT上传Shell.最近又遇到几个PUT上传的例子,也成功上传了几次,来分享一下思密达. 0x00 ...
- 关于oi
2015-12-26 今天在机房,楼上的孩子发下来一个exe,善良无知的我打开了那个exe,然后电脑就关机了.萌萌的辅导老师看到之后就不再萌萌哒,他跑到五楼训斥了那群孩子们一顿(自行脑补).出于报复, ...