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 ...
随机推荐
- opencv第四章
1.载入一个带有有趣纹理的图像,使用cvSmooth()函数以多种方法平滑图像,参数为smoothtype = CV_GAUSSIAN. a.使用对称的平滑的平滑窗口,大小依次是3x3,5x5,9x9 ...
- Android 判断SD卡是否存在和使用容量查询
1.判断SD卡是否存在 返回true表示存在 /* 判断SD卡是否存在 返回true表示存在 */ public boolean avaiableMedia() { String status = E ...
- springCloud Zuul网关
1.springboot 仅2.0.x 支持,在此选择 2.0.7 2.新建Module eureka-zuul-client 3.导入依赖 <?xml version="1.0&qu ...
- yii2 项目初始化
yii 项目目录下执行.composer self-updatecomposer global require "fxp/composer-asset-plugin:^1.4.1" ...
- 如何在windows平台下使用hsdis与jitwatch查看JIT后的汇编码
1. 安装hsids 这一步比较麻烦,需要提前安装cygwin,以及下载openjdk的源码 具体步骤请参考下面的两篇文章 How to build hsdis-amd64.dll and hsdis ...
- tomcat中reloadable作用
reloadable作用 reloadable:如果这个属性设为true,tomcat服务器在运行状态下会监视在WEB-INF/classes和WEB-INF/lib目录下class文件的改动,如果监 ...
- Square Number & Cube Number
Square Number: Description In mathematics, a square number is an integer that is the square of an in ...
- 如何使用Jenkins进行持续集成测试
如何使用Jenkins进行持续集成测试: 安装Java环境: 安装Jenkins:两种方式,直接运行文件:使用tomcat运行: 创建一个job,构建的时候选择 execute Windows bat ...
- n2n搭建手记-2-V2
n2n-V2搭建 [1.]在V1中遇到的问题 在完成V1搭建后,边缘节点1台机器由centos 6.5 重装为Centos 7 ,再次重加入V1时遇到 与节点其他机器 可 ping通.能通过机器的公网 ...
- GetAdaptersInfo获取网卡配置和Ip地址信息
一台机器上可能不只有一个网卡,但每一个网卡只有一个MAC地址,而每一个网卡可能配置有多个IP地址:如平常的笔记本电脑中,就会有无线网卡和有线网卡(网线接口)两种:因此,如果要获得本机所有网卡的IP和M ...