angular directive 深入理解
由于业务的需要，最近angular 的diretive 研究的比较多，有和同事一起共同协作开发scada的项目， 对directive 有了进一步更深的理解。
感觉才开始真正理解了这句话的意思:
In an AngularJS directive the scope allows you to access the data in the attributes of the element to which the directive is applied
这句话，感觉道出了diretive的原理的精髓。
--------------------------------------------------------------------------------------------------------------------
> is not in the documentation.
< is for one-way binding.
@ binding is for passing strings. These strings support {{}} expressions for interpolated values.
= binding is for two-way model binding. The model in parent scope is linked to the model in the directive's isolated scope.
& binding is for passing a method into your directive's scope so that it can be called within your directive.
When we are setting scope: true in directive, Angular js will create a new scope for that directive. That means any changes made to the directive scope will not reflect back in parent controller.
---------------------------------------------------------------------------------------------------------------------
In an AngularJS directive the scope allows you to access the data in the attributes of the element to which the directive is applied.
This is illustrated best with an example:
<div my-customer name="Customer XYZ"></div>and the directive definition:
angular.module('myModule', [])
.directive('myCustomer', function() {
return {
restrict: 'E',
scope: {
customerName: '@name'
},
controllerAs: 'vm',
bindToController: true,
controller: ['$http', function($http) {
var vm = this;
vm.doStuff = function(pane) {
console.log(vm.customerName);
};
}],
link: function(scope, element, attrs) {
console.log(scope.customerName);
}
};
});When the scope property is used the directive is in the so called "isolated scope" mode, meaning it can not directly access the scope of the parent controller.
In very simple terms, the meaning of the binding symbols is:
someObject: '=' (two-way data binding)
someString: '@' (passed directly or through interpolation with double curly braces notation {{}})
someExpression: '&' (e.g. hideDialog())
This information is present in the AngularJS directive documentation page, although somewhat spread throughout the page.
The symbol > is not part of the syntax.
However, < does exist as part of the AngularJS component bindings and means one way binding.
<!DOCTYPE>
<html ng-app="App">
<head>
<meta charset="utf-8"/>
<script src="./js/angular.min.js"></script>
<script>
var app = angular.module('App', []);
app.controller('appCtrl', function($scope){
// $scope.names = {age: 12};
$scope.names = 'FLY';
// DB.getAl().then(function (rsp) {
// $scope.name=100;
// })
$scope.changeNames = function(){
$scope.names = "AAA";
};
$scope.cbFun = function(name){
// alert('parent action.');
alert(name);
/**
*
*
*
*/
};
$scope.doStuff = function () {
alert('parent scope');
} });
app.directive('myCustomer', function(){
return {
scope: {
fly: '@'
},
restrict: 'A',
link: function(scope, element, attr){
console.log('attr: ', attr); console.log("myCustomer: ", scope);
},
controllerAs: 'vmst',
bindToController: true,
controller: ['$scope', '$http', function(scope, $http) {
var vm = this;
console.log('this: ', this);
console.log('scope: ', scope);
vm.doStuff = function(pane) {
console.log(vm.customerName);
};
vm.name = 'pxk';
scope.doStuff = function(){
alert('asdfafa');
}
}],
// template: '<button ng-click="doStuff();">aaaa</button>'
};
}); </script>
</head>
<body ng-controller="appCtrl">
<div my-customer="" haha="12ab3" fly="jiayou">myCustomer <button ng-click="doStuff();">aaa</button>
</div>
<hr/>
</body>
</html>
angular directive 深入理解的更多相关文章
- angular directive scope
angular directive scope 1.当directive 中不指定scope属性,则该directive 直接使用 app 的scope: 2.当directive 中指定scope属 ...
- angular 自定义指令 directive transclude 理解
项目中断断续续的用了下angular,也没狠下心 认真的学习.angular 特别是自定义指令这块 空白. transclude 定义是否将当前元素的内容转移到模板中.看解释有点抽象. 看解释有点抽象 ...
- angular directive指令内的参数
angular.module('myApp', []) .directive('myDirective', function() { return { restrict: String, priori ...
- angular directive指令的复用
“指令之之所以要定义成指令就是为了复用!” 指令一定是可以用在不同的controller里面的,为了在不同的controller去使用它,我们一定要给指定的配置项一个指令.这样才能跟外面的控制器进行交 ...
- 使用 angular directive 和 json 数据 D3 随着标签 donut chart演示样本
使用angular resource载入中priorityData.json中间json数据,结合D3绘制甜甜圈图.执行index.html其结果见于图.: priorityData.json中jso ...
- [Angular Directive] Assign a Structual Directive a Dynamic Context in Angular 2
Just like passing in an array to *ngFor, you can pass in any value into your structural directive s ...
- [Angular Directive] Implement Structural Directive Data Binding with Context in Angular
Just like in *ngFor, you're able to pass in data into your own structural directives. This is done b ...
- angular directive
1.restrict (字符串)可选参数,指明指令在DOM里面以什么形式被声明: 取值有:E(元素),A(属性),C(类),M(注释),其中默认值为A: E(元素):<directiveName ...
- angular directive自定义指令
先来看一下自定义指令的写法 app.directive('', ['', function(){ // Runs during compile return { // name: '', // pri ...
随机推荐
- hdu 3768(spfa+暴力)
Shopping Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total S ...
- hdu 1411(四面体的体积)
校庆神秘建筑 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Subm ...
- ros pcl sensor::pointcloud2 转换成pcl::pointcloud
#include <pcl_conversions/pcl_conversions.h> #include <pcl/point_types.h> #include <p ...
- 一次处理CentOS服务器被攻击往外发广播包
情况是这样:我们在某地托管的一台linux服务器,突然接到机房电话说是我们机器将整个IDC网络搞瘫了.外部机器没法访问IDC. 挂掉电话后:我就开始考虑,托管机器的机房是有硬防的,我本身一台机器怎么 ...
- JAVA的线程学习、并发线程的学习
http://blog.csdn.net/column/details/multithreading.html http://blog.csdn.net/fhd001/article/details/ ...
- 微信支付报错：app没有获取微信支付权限
调试微信支付的时候报错: Array( [return_code] => FAIL [return_msg] => 您没有APP支付权限) 查询了,发现自己将之前的公众号支付的APPID一 ...
- laravel使用redis做缓存的方法
1.存redis 使用setex命令可以同时设置数据和保存时间 $data = [ 'name'=>zhangsan, , ]; Redis::setex($cacheKey, , serial ...
- HDU 5969 最大的位或【贪心/按位或/思维】
链接 最大的位或 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) Total Subm ...
- 字典树（Trie Tree）
终于要开始更新我的ACM学习之路了,不过没想到却是因为一次Java大作业,有趣,%yuan老师. 字典树是一种很简单的树形结构,主要用来进行词频统计,在算法竞赛中有时也会碰到. 字典树的基本思路是,通 ...
- python3 while循环及for循环
yueer = 18 count = 0 while count < 3: yueerage = int(input('悦儿多大呢:')) if yueerage == yueer: print ...