由于业务的需要，最近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 深入理解的更多相关文章

  1. angular directive scope

    angular directive scope 1.当directive 中不指定scope属性,则该directive 直接使用 app 的scope: 2.当directive 中指定scope属 ...

  2. angular 自定义指令 directive transclude 理解

    项目中断断续续的用了下angular,也没狠下心 认真的学习.angular 特别是自定义指令这块 空白. transclude 定义是否将当前元素的内容转移到模板中.看解释有点抽象. 看解释有点抽象 ...

  3. angular directive指令内的参数

    angular.module('myApp', []) .directive('myDirective', function() { return { restrict: String, priori ...

  4. angular directive指令的复用

    “指令之之所以要定义成指令就是为了复用!” 指令一定是可以用在不同的controller里面的,为了在不同的controller去使用它,我们一定要给指定的配置项一个指令.这样才能跟外面的控制器进行交 ...

  5. 使用 angular directive 和 json 数据 D3 随着标签 donut chart演示样本

    使用angular resource载入中priorityData.json中间json数据,结合D3绘制甜甜圈图.执行index.html其结果见于图.: priorityData.json中jso ...

  6. [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 ...

  7. [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 ...

  8. angular directive

    1.restrict (字符串)可选参数,指明指令在DOM里面以什么形式被声明: 取值有:E(元素),A(属性),C(类),M(注释),其中默认值为A: E(元素):<directiveName ...

  9. angular directive自定义指令

    先来看一下自定义指令的写法 app.directive('', ['', function(){ // Runs during compile return { // name: '', // pri ...

随机推荐

  1. 汉字hash问题(转)

    一.汉字编码的种类 汉字编码中现在主要用到的有三类,包括GBK,GB2312和Big5. 1.GB2312又称国标码,由国家标准总局发布,1981年5月1日实施,通行于大陆.新加坡等地也使用此编码.它 ...

  2. docker从零开始网络(七) 配置daemon和容器

    启用IPv6支持 在Docker容器或swarm服务中使用IPv6之前,需要在Docker守护程序中启用IPv6支持.之后,您可以选择将IPv4或IPv6(或两者)与任何容器,服务或网络一起使用. 注 ...

  3. ubuntu 16.04 qtcreator 闪退

    当用QtCreator 进行代码自动补全时,比如编写ros代码,ROS_INFO时候就会出现闪退,后面按照 http://doc.qt.io/qtcreator/creator-clang-codem ...

  4. Remove @Override annotation错误提示

    因为对于JDK5.0/1.5版本来说,@Override annotation只能用与对超类的方法重写上, 而不能用在对接口方法的实现方法上. 解决的方法是把JDK改为1.6的或动手把注释@Overr ...

  5. CF984 C. Finite or not?【数论/GCD】

    [链接]:CF [题意]:n组样例,对于每组样例,给你三个数p q b,问你p/q在b进制下是不是一个有限小数,是的话输出Finite,否则输出Infinite. [分析]:b的过程是对q约分,那么只 ...

  6. POJ 2438 Children's Dining(哈密顿回路)

    题目链接:http://poj.org/problem?id=2438 本文链接:http://www.cnblogs.com/Ash-ly/p/5452615.html 题意: 有2*N个小朋友要坐 ...

  7. 19、Flask实战第19天：CSRF攻击与防御

    CSRF攻击原理 网站是通过cookie来实现登录功能的.而cookie只要存在浏览器中,那么浏览器在访问这个cookie的服务器的时候,就会自动的携带cookie信息到服务器上去.那么这时候就存在一 ...

  8. HDOJ 2582 f(n)

    Discription This time I need you to calculate the f(n) . (3<=n<=1000000) f(n)= Gcd(3)+Gcd(4)+… ...

  9. POJ 3692 Kindergarten（最大独立集）

    [题目链接] http://poj.org/problem?id=3692 [题目大意] 男生相互之间都认识,女生相互之间也都认识, 一些男生和一些女生相互之间也认识,求找出最多的人参加派对, 他们相 ...

  10. [xsy2978]Product of Roots

    $\newcommand{align}[1]{\begin{align*}#1\end{align*}}$题意:给出$f(x)=\prod\limits_{i=1}^n(a_ix+1)$和$g(x)= ...