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 ...
随机推荐
- ios framework 开发
ios framework 开发 之 参考 ios framework 开发 之 实战 iOS workspace 依次编译多个工程
- PHP5中PDO的入门教程
PDO(PHP Data Object) 是PHP 5新出来的东西,在PHP 5.5中,更是强烈推荐使用PDO来处理数据库,将把所有的数据库扩展移到了PECL,那么默认就是没有了我们喜爱的php_my ...
- Delphi拷贝目录(含子目录)的方法
要实现目录级的拷贝,可以利用Windows API函数ShFileOperation( ),其函数声明如下: WINSHELLAPI int WINAPI SHFileOperation( LPSHF ...
- #搜索# #BFS# #优先队列# ----- OpenJudge鸣人和佐助
OpenJudge 6044:鸣人和佐助 总时间限制: 1000ms 内存限制: 65536kB 描述 佐助被大蛇丸诱骗走了,鸣人在多少时间内能追上他呢? 已知一张地图(以二维矩阵的形式表示)以及佐 ...
- main函数执行前、后再执行的代码
一.main结束 不代表整个进程结束 (1)全局对象的构造函数会在main 函数之前执行, 全局对象的析构函数会在main函数之后执行: 用atexit注册的函数 ...
- iOS oc和swift中协议的使用
创建一个空的工程 在工程中我们新建一个类 继承与NSObject 定义一个协议‘ @protocol UpdateAlertDelegate <NSObject> //这里的红色字体就是我 ...
- java中Integer比较需要注意的问题
java中Integer比较需要注意的问题 package com.srie.test; import java.util.HashMap; import java.util.Map; public ...
- 搭建Node.js开发IDE环境WebStrom5 多图
1.下载前期准备 node.js下载地址 http://nodejs.org/ WebStrom5下载地址: http://download-ln.jetbrains.com/webide/WebSt ...
- Spring EL中的类操作符
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns:xsi="http://ww ...
- Canvas 颜色反转
ImageData中的元素反转颜色 255-data[i,i+1,i+2] <!DOCTYPE html> <html lang="en"> <hea ...