由于业务的需要，最近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. 让button居中显示的的标签

    <center> <input type="button" class="buttoncls" style="width:80px& ...

  2. 2.jinja2

    1.jinja2模板介绍和查找路径 from flask import Flask, render_template import os # 之前提到过在渲染模板的时候,默认会从项目根目录下的temp ...

  3. JavaScript获取和操作html的元素

    #转载请留言联系 1.获取元素 JavaScript的用途就是为了实现用户交互和网页的大部分动画.所以JavaScript常常需要操作html中的元素.要先操作就要先获取过来.JS有几种途径获取元素, ...

  4. 曹政：CTO这点事

    几乎整个互联网行业都缺 CTO,特别是一些草根背景的创业者,这个问题更加显著.从我自己的感受,身边各种朋友委托我找 CTO 的需求,嗯,算下来超过两位数了,光最近一个月就有 3 个,而且这三家都是刚拿 ...

  5. Linux下如何批量转码iconv

    来源:http://hi.baidu.com/curioz/blog/item/2555863514f9491d90ef390d.html 下载了不少文本txt,如verycd上的致纯书苑,解压看看是 ...

  6. Eclipse,myeclipse安装 配置Maven

    本文转自http://www.cnblogs.com/timeng/archive/2013/05/07/maven_install.html myeclipse自带了maven插件,但是和原生插件还 ...

  7. 使用navicat修改Mysql默认密码

    本质就是修改数据库mysql里面的数据表user一个字段,并执行如下一句mysql语句: UPDATE user SET password=PASSWORD('密码') WHERE user='roo ...

  8. 洛谷——P1088 火星人

    P1088 火星人 题目描述 人类终于登上了火星的土地并且见到了神秘的火星人.人类和火星人都无法理解对方的语言,但是我们的科学家发明了一种用数字交流的方法.这种交流方法是这样的,首先,火星人把一个非常 ...

  9. bzoj4543[POI2014]Hotel

    题目链接 bzoj4543 [POI2014]Hotel 题解 这不是裸地点分嘛 ,我真傻,真的 n^2 这不是是sb题,~滑稽 ~ 枚举点转换为无根树,暴力子树中点的深度 计数转移 令a b c d ...

  10. 【dfs】【高斯消元】【异或方程组】bzoj1770 [Usaco2009 Nov]lights 燈 / bzoj2466 [中山市选2009]树

    经典的开关灯问题. 高斯消元后矩阵对角线B[i][i]若是0,则第i个未知数是自由元(S个),它们可以任意取值,而让非自由元顺应它们,得到2S组解. 枚举自由元取0/1,最终得到最优解. 不知为何正着 ...