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 ...
随机推荐
- python数据类型-----字符串
今天来总结下python3.4版本字符串的一些操作方法,对这些方法先作一个简单的分类,按照分类来进行总结. Sequence Typessequence类型有六种:strings, byte sequ ...
- mpvue-小程序之蹲坑记
1. 不支持 v-html 小程序里所有的 BOM/DOM 都不能用,也就是说 v-html 指令不能用 部分复杂的 JavaScript 渲染表达式 {{}} 双花括号的部分,直接编码到 wxml ...
- pytest学习（2）
可以把多个test放在一个class里, class TestClass(object): def test_one(self): x = "this" assert 'h' in ...
- Laravel开启跨域的方法
1.建立中间件Cors.php 命令:php artisan make:middleware Cors 在/app/Http/Middleware/ 目录下会出现一个Cors.php 文件. 内容如下 ...
- codeforces 671C
题意定义f(l,r)为去掉[l,r]部分后剩下的数任意两个数的最大公约数的最大值 现在求f(l,r)的和 由于每个数ai最大只有200000,因此我们穷举因子x,记录以其为因子的a[i]的i值并按i升 ...
- centos6.5 phpmyadmin 您应升级到 MySQL 5.5.0 或更高版本
看到自己当初写的,并没有直接的解决问题,而是退而求其次,安装低版本的mysql5.1,然后安装对应版本的phpmyadmin 4.0.10.5 UnicodeDecodeError: 'ascii' ...
- MySQL 使用硬链接配合truncate 删除2.2T的表
1 创建tmp 表并 rename 表 mysql> rename table ep to ep_bak; Query OK, 0 rows affected (0.07 sec) mysql& ...
- codeforces Round 442 B Nikita and string【前缀和+暴力枚举分界点/线性DP】
B. Nikita and string time limit per test 2 seconds memory limit per test 256 megabytes input standar ...
- HDU 2164（模拟）
Rock, Paper, or Scissors? Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Jav ...
- [BZOJ 1212] L语言
Link: BZOJ 1212 传送门 Solution: 看到字符串的多模式匹配,正解一般就是Trie树/AC自动机 此题由于每个模式串长度都很小,于是直接在Trie树上暴力就行了 先把所有模式串建 ...