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 ...
随机推荐
- 工作技能===开发不改bug？给你支个招
在测试过程中,不免会遇到开发人员因为一些原因不想修改个别bug的情况.那一般遇到这种问题时,我们该如何去推进开发修改bug呢? 我们先来分析下到底会有哪些原因会导致开发不修改bug 1. 开发与测试对 ...
- 如何修改linux 的SSH的默认端口号?
http://blog.chinaunix.net/uid-7551698-id-1989086.html 在安装完毕linux,默认的情况下ssh是开放的,容易受到黑客攻击,简单,有效的操作之一 ...
- Nodejs获取Azure Active Directory AccessToken
因为现有的代码已经迁入至Azure中,并且受AD保护,所以在获取数据时,需要传入Token后才可以获取到数据,那么第一步肯定是需要先提取到token var adal = require('adal- ...
- 肖申克的救赎 -Hope
典狱长诺顿高高在上,平时道貌岸然,对圣经倒背如流,实际上攫取利益时不择手段,残酷.阴险而贪婪.狱警长海利和其他警员,凶狠残暴,充当诺顿的打手,草菅囚犯的人命.他们是不是象极了我们现实中的掌权阶层?我称 ...
- mysql having的用法
having的用法 having字句可以让我们筛选成组后的各种数据,where字句在聚合前先筛选记录,也就是说作用在group by和having字句前.而 having子句在聚合后对组记录进行筛选. ...
- UESTC 1599.wtmsb-STL(priority_queue)
wtmsb Time Limit: 1000/100MS (Java/Others) Memory Limit: 131072/131072KB (Java/Others) 这天,AutSky_Jad ...
- Codeforces 626 B. Cards (8VC Venture Cup 2016-Elimination Round)
B. Cards time limit per test 2 seconds memory limit per test 256 megabytes input standard input ...
- 蒟蒻的9个背包的浩大工程（更新中）（无限延期）（太长了不舍删虽然写的lj的一匹）
所以说这就是一篇写炸的废文!!!! 所以说背包直接看dd大神的就好了,算了瞎写写吧. 0/1背包 有n件物品和一个容量为C的背包.第i件物品的重量是w[i],价值是v[i].求解将哪些物品放入背包可使 ...
- [haoi2009]巧克力
鉴于河南是oi弱省,所以想来这道题也没什么人会翻出来写吧,而且这还是haoi2009的一道简单题目,所以估计也没几个人会写博客的,那么看在我这么弱的份上,我觉得是应该写一篇出来的. 这道题我是按照贪心 ...
- zoj2318
zoj2318 题意 一个平面上给出很多圆,其中一个圆为现在自己的位置,问这个圆能不能冲出其它圆的包围(不能与其它圆相交). 分析 将所有圆心平移,使得自己的圆圆心处于原点,将所有圆半径增加自己圆的半 ...