指令 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 创建一个继承了父作用 ...
随机推荐
- Java小程序---接口中抽象方法的实现（解决了JAVA语言不能多继承的问题）
public interface Sing { public static final String eyecolor="black"; public void sleep(); ...
- Unable to make the session state request to the session state server处理方法
Server Error in '/' Application. Unable to make the session state request to the session state serve ...
- 对WebClient扩展自动解压缩页面
WebClient下载压缩网页时出现的全是乱码,可通过扩展来解决这个问题. public class MyWebClient : WebClient { protected override WebR ...
- ASP.NET DataList嵌套实现评论效果
问题: Datalist1显示say这个表的数据 然后想在Datalist1中嵌套一个Datalist2用于显示对应的评论表2的 sayID对应表1的id,若表2中找不到对应sayId则在对应的Dat ...
- Redhat 6.5 x64 下载地址
http://ftp.okhysing.is/ftp/redhat/6.5/isos/x86_64/
- 查找计算机IP及占用端口
1. 在电脑启动搜索框,输入cmd回车打开命令提示符窗口. 输入ipconfig,就可以查看电脑的子网淹没,默认网关,IP等信息. 2. 查看本机开放的端口,即已被占用的端口号. 命令: netsta ...
- js简单实现删除记录时的提示效果
删除记录时的提示效果,挺人性化的,实现的方法有很多,在本文为大家介绍下使用js是如何实现的 样式 复制代码代码如下: <style type="text/css"> ...
- php查询ip地址来源归属地的脚本
<?php header('Content-Type:text/html;charset=utf-8'); if($_GET['sub']){ $ip = $_GET['ip']; $msg = ...
- web2py--------------用web2py写 django的例子 --------开发环境
我们先从广为人知的例子说起xi 也就是官方的例子,我会在最后给出代码: ============================环境=================== 编译器使用vs code , ...
- 本地化web开发的一个例子-jquery.i18n.properties
关键字:Web本地化, jquery,jquery.i18n.properties. 运行环境:Chrome, IE. 本文介绍使用jquery.i18n.properties对网站前端实现本地化,支 ...