指令 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 创建一个继承了父作用 ...
随机推荐
- C++(指针）
指针在编程中有时很重要的作用 我们可以用它完成一些看似不可能完成的任务 #include<iostream>using namespace std;void square(int *n){ ...
- OpenJudge/Poj 1979 Red and Black / OpenJudge 2816 红与黑
1.链接地址: http://bailian.openjudge.cn/practice/1979 http://poj.org/problem?id=1979 2.题目: 总时间限制: 1000ms ...
- OpenJudge/Poj 1125 Stockbroker Grapevine
1.链接地址: http://poj.org/problem?id=1125 http://bailian.openjudge.cn/practice/1125 2.题目: Stockbroker G ...
- Apache（二）
Apache的基本配置 1.监听套接字[ip : port] 2.实现持久连接(keep alive) 3.MPM模块 命令行中执行 core.c : 核心模块 prefork.c ...
- winFrom窗体样式
ControlBox窗口样式:确定窗体是否有"控件/系统"菜单框. 设置为隐藏 False AutoSizeMode GrowAndShrink 指定用户界面元素自动调整自身大小 ...
- input效果：当鼠标在input中输入文字是改变内部文字效果
主要用到属性:onpropertychange事件(属性改变时触发的事件),oninput属性(当input有输入时发生的事件) onpropertychange事件是IE专属事件 oninput属性 ...
- call(this)引起的对闭包的重新理解
call(this)引起的对闭包的重新理解.md 变量的作用域 全局变量局部变量 Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量. 函数外部无法读取函数内的局部变量. 函数内部 ...
- php class类的用法详细总结
以下是对php中class类的用法进行了详细的总结介绍,需要的朋友可以过来参考下 一:结构和调用(实例化): class className{} ,调用:$obj = new className(); ...
- 关于《一步步学习ASP.NET MVC3》系列发布时间的说明
在写这个系列的时候,老魏也是下了很大的决心,因为平时基本上没有时间写文章,这回我要挑战我自己的意志力,决定要把这个系列写完整. 再次呢,老魏不能向大家保证什么时间结束,但基本上要保持一天一篇的进度,如 ...
- cocos2dx 3.4 截图代码
Size size = Director::sharedDirector()->getWinSize(); //定义一个屏幕大小的渲染纹理 RenderTexture* pScreen = Re ...