angular : direative : scope | 指令scope里的符号@，=
先看看以下的代码
<body ng-app="app" ng-controller="ctrl">
<dir myname="name"></dir>
<script src="js/angular.js"></script>
<script>
var app = angular.module("app", []);
app.controller("ctrl", function ($scope, $timeout) {
$scope.name = "ABC";
$timeout(function () {
$scope.name = "XYZ";
//console.log("ctrl :" + $scope.name);
}, 2000);
});
app.directive("dir", function ($timeout) {
return {
restrict: "E",
template: "<div>{{dirName}}</div>",
link: function (scope, elem, attr) {
$timeout(function () {
//scope.name = "XYZ";
console.log("dir :" + scope.dirName);
}, 3000);
},
scope: {
dirName: "=myname"
}
}
});
</script>
</body>
以上 ^ : 一开始会显示ABC，2秒后会显示XYZ。*外面可以同步内部
app.controller("ctrl", function ($scope, $timeout) {
$scope.name = "ABC";
$timeout(function () {
//$scope.name = "XYZ";
//console.log("ctrl :" + $scope.name);
}, 2000);
});
app.directive("dir", function ($timeout) {
return {
restrict: "E",
template: "<div>{{dirName}}</div>",
link: function (scope, elem, attr) {
$timeout(function () {
scope.dirName = "XYZ";
console.log("dir :" + scope.dirName);
}, 3000);
},
scope: {
dirName: "=myname"
}
}
});
以上^ : 开始显示ABC，3秒后显示XYZ。*内部可以同步外部
app.controller("ctrl", function ($scope, $timeout) {
$scope.name = "ABC";
$timeout(function () {
$scope.name = "XYZ";
//console.log("ctrl :" + $scope.name);
}, 2000);
});
app.directive("dir", function ($timeout) {
return {
restrict: "E",
template: "<div>{{dirName}}</div>",
link: function (scope, elem, attr) {
$timeout(function () {
//scope.dirName = "XYZ";
console.log("dir :" + scope.dirName);
}, 3000);
},
scope: {
dirName: "@myname"
}
}
});
以上^ : 开始显示name，3秒后显示name。*内部的符号“@”只能拿到string
<body ng-app="app" ng-controller="ctrl">
<dir myname="{{name}}"></dir>
<script src="js/angular.js"></script>
<script>
var app = angular.module("app", []);
app.controller("ctrl", function ($scope, $timeout) {
$scope.name = "ABC";
$timeout(function () {
$scope.name = "XYZ";
//console.log("ctrl :" + $scope.name);
}, 2000);
});
app.directive("dir", function ($timeout) {
return {
restrict: "E",
template: "<div>{{dirName}}</div>",
link: function (scope, elem, attr) {
$timeout(function () {
//scope.dirName = "XYZ";
console.log("dir :" + scope.dirName);
}, 3000);
},
scope: {
dirName: "@myname"
}
}
});
</script>
</body>
以上 ^ : 一开始会显示ABC，2秒后会显示XYZ。*外面可以同步内部，同时注意div里是使用{{}}的表达式
app.controller("ctrl", function ($scope, $timeout) {
$scope.name = "ABC";
$timeout(function () {
//$scope.name = "XYZ";
//console.log("ctrl :" + $scope.name);
}, 2000);
});
app.directive("dir", function ($timeout) {
return {
restrict: "E",
template: "<div>{{dirName}}</div>",
link: function (scope, elem, attr) {
$timeout(function () {
scope.dirName = "XYZ";
console.log("dir :" + scope.dirName);
}, 3000);
},
scope: {
dirName: "@myname"
}
}
});
以上 ^ : 一开始会显示ABC，2秒后会显示XYZ。*内面可以同步外部，同时注意div里是使用{{}}的表达式
angular : direative : scope | 指令scope里的符号@，=的更多相关文章
- angular : direative : scope | 指令scope和transclude的关系
今天记入的是指令的scope和transclude关系 a 和 b 都是指令 <div a> <div b></div> </div> a transc ...
- AngularJS入门心得4——漫谈指令scope
上篇<AngularJS入门心得3——HTML的左右手指令>初步介绍了指令的概念和作用.已经和指令打过一个照面,就不会那么陌生了,今天主要介绍的是一个困扰了我很久终于想通的问题,这个问题与 ...
- angular : direative ：comunication 指令之间的通讯
在网络上可以找到多种指令之间的通讯 · $on,$emit,$boardcast (向上或向下冒泡) · 指令return的required (^)向上一个scope通讯,前提要先给scope一个na ...
- angularJS1笔记-(14)-自定义指令(scope)
index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- AngularJS 全局scope与指令 scope通信
在项目开发时,全局scope 和 directive本地scope使用范围不够清晰,全局scope与directive本地scope通信掌握的不够透彻,这里对全局scope 和 directive本地 ...
- Angular的自定义指令以及实例
本文章已收录于: AngularJS知识库 分类: javascript(55) http://www.cnblogs.com/xiaoxie53/p/5058198.html 前面的文章介 ...
- Angular内置指令（二）
目录: $rootScope,ng-app,.run(),ng-include,ng-repeat,ng-if,ng-switch,ng-init ng-show/ng-hide,ng-model,n ...
- Angular.js之指令学习笔记
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...
- angular directive自定义指令
先来看一下自定义指令的写法 app.directive('', ['', function(){ // Runs during compile return { // name: '', // pri ...
随机推荐
- 分析java堆
内存溢出(OutOfMemory) OOM 堆溢出 直接内存溢出 永久区溢出
- UVa 10670 - Work Reduction
题目大意:对n份文件进行处理使其减少到m份,有l个机构可供选择.每个机构提供两种方案:每减少一份收费a元,或者减少到文件数量的一半收费b元.根据各个机构收取费用进行排序. 很直接的题目,直接进行模拟就 ...
- zabbix3.0.4 部署History
[root@zabbix-Test ~]# history 1 passwd root 2 exit 3 yum install ntpd* 4 yum inst ...
- Vim 第一天
记得第一次接触vi编辑器,好像是在海尔的机房吧,那是时候还是没有毕业的小菜鸟一只(PS:现在也是菜鸟),记得是测试一个云存储的产品.看着他们用vi编辑器,当时也没有感觉有什么(现在也没感觉……),只是 ...
- iOS 之 Strong与Weak，_unsafe _unretained与weak区别
1. 在ARC中 strong(强引用) 相当于retain, weak(弱引用) 相当于assign.ARC下,strong告诉编译器自动插入retain.但是在ARC下,代理协议的属性依然用ass ...
- Redhat6.4下配置本地yum
一.准备工作1. Linux安装盘插入光驱 2. 挂载光驱 [root@localhost ~]# mount /dev/cdrom /mnt/ mount: block device /dev/s ...
- Linux文件权限与目录配置
一.linux文件属性 用户组概念:假如主机有两个团体,第一个团体名为projecta,里面有class1,class2,class3:第二个团体名为projecb,里面有class4,class5, ...
- 我的Linux系统的VIMRC
" llvm CODING GUIDELines conformance for VIM" $Revision$"" Maintainer: The LLVM ...
- Java错题
加粗为正确答案,绿色为错选答案 1.对于以下代码: for ( int i=0; i<10; i++) System.out.println(i); for循环后,i的值是多少? A.i不再存 ...
- Python之日期与时间处理模块（date和datetime）
本节内容 前言 相关术语的解释 时间的表现形式 time模块 datetime模块 时间格式码 总结 前言 在开发工作中,我们经常需要用到日期与时间,如: 作为日志信息的内容输出 计算某个功能的执行时 ...