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 ...
随机推荐
- 深入理解SQL的四种连接
SQL标准 select table1.column,table2.column from table1 [inner | left | right | full ] join table2 on t ...
- HNU 13074 Goldbach’s Conjecture 解题报告
题目大意:输入一个偶数(x<32000),输出这个偶数是由哪两个素数相加所得. 比如:一个偶数26,它可以是3+23,7+19,13+13,这些素数相加所得. 输入输出样例: Sample In ...
- Html 和 Css 的杂乱总结
1. input 中可以设置 maxLength 属性,控制输入的文字数量,中英文字节数一样,但是没有验证兼容性 2.客户端中的页面禁止右键,复制等 <body scroll="no& ...
- 3.2. 添加模板版本（Core Data 应用程序实践指南）
为了不像3.1那样崩溃,修改模型之前先创建新的模型版本.添加之后,会生成一个新的xcdatamodel文件,并且跟原来的内容完全一样,这有意思了,但是不要删除原来旧版的模型.旧的模型有助于把原来持久化 ...
- Spring学习笔记IOC与AOP实例
Spring框架核心由两部分组成: 第一部分是反向控制(IOC),也叫依赖注入(DI); 控制反转(依赖注入)的主要内容是指:只描述程序中对象的被创建方式但不显示的创建对象.在以XML语言描述的配置文 ...
- ThinkPHP URL伪静态、路由规则、重写、生成
一.URL规则 1.默认是区分大小写的 2.如果我们不想区分大小写可以改配置文件 'URL_CASE_INSENSITIVE'=>true,//url不区分大小写 ...
- 记一次DG搭建过程中备库ORA-00210，ORA-00202，ORA-27086错误
ORA-00210: cannot open the specified control file ORA-00202: control file: '/u01/app/oracle/oradata/ ...
- easyUI resizable组件使用
easyUI resizable组件使用: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- doubango介绍
1.doubango官网:http://www.doubango.org/ 2.doubango是一个开源的VOIP基础平台, 并能用于嵌入式和桌面系统的开源框架,该框架使用ANSCI-C编写,具有很 ...
- Bootstrap入门（二十五）JS插件2：过渡效果
Bootstrap入门(二十五)JS插件2:过渡效果 对于简单的过渡效果,只需将 transition.js 和其它 JS 文件一起引入即可.如果你使用的是编译(或压缩)版的bootstrap.js ...