<div my-directive

    my-url="http://google.com"

    my-link-text="Click me to go to Google"></div> 

angular.module('myApp', [])

.directive('myDirective', function() {

    return {

        restrict: 'A',

        replace: true,

        scope: {

            myUrl: '@', //绑定策略 ：字符串绑定策略

            myLinkText: '@' //绑定策略:

        },

        template: '<a href="{{myUrl}}">' +

            '{{myLinkText}}</a>'

    };

});

　　作用域数据绑定　　

　　自定义标签或者进行扩展时，会有这样的需求场景，要在标签中添加一些属性，实现一些复杂功能。

　　关于这些属性，独立作用域是如何的做的呢？看看下面的内容吧。

　　举个例子：

<xingoo say="name"></xingoo>

<xingoo say="name()"></xingoo>

　　假设传入的是上面这种，我们如何区分它传入的到底是变量呢？还是字符串呢？还是方法呢？

　　因此AngularJS有了三种自定义的作用域绑定方式：

　　1 基于字符串的绑定：使用@操作符，双引号内的内容当做字符串进行绑定。

　　2 基于变量的绑定：使用=操作符，绑定的内容是个变量。

　　3 基于方法的绑定：使用&操作符，绑定的内容时个方法。

　　首先看一下基于字符串的绑定：

<!doctype html>

<html ng-app="myApp">

    <head>

         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

         <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>

    </head>

    <body>

        <div ng-controller="myAppCtrl">

            <xingoo say="test string"></xingoo>

            <xingoo say="{{str2}}"></xingoo>

            <xingoo say="test()"></xingoo>

        </div>

        <script type="text/javascript">

            var myAppModule = angular.module("myApp",[]);

            myAppModule.controller("myAppCtrl",['$scope',function($scope){

                $scope.str1 = "hello";

                $scope.str2 = "world";

                $scope.str3 = "angular";

            }]);

            myAppModule.directive("xingoo",function(){

                return {

                    restrict:'AE',

                    scope:{

                        say:'@'

                    },

                    template:"<div>{{say}}</div><br>",

                    repalce:true

                }

            })

        </script>

    </body>

</html>

　　看一下代码，在body中使用了三次自定义的标签，每种标签的内部有一个say的属性，这个属性绑定了一个双引号的字符串。

　　在指令的定义中，添加了scope:{say:'@'}这个键值对属性，也就是说，angular会识别say所绑定的东西是一个字符串。

　　在模板中，使用表达式{{say}}输出say所表示的内容。

　　可以看到，双引号内的内容都被当做了字符串。当然{{str2}}表达式会被解析成对应的内容，再当做字符串。

　　如果绑定的是一个变量呢！

<!doctype html>

<html ng-app="myApp">

    <head>

         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

         <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>

    </head>

    <body>

        <div ng-controller="myAppCtrl">

            ctrl:<input type="text" ng-model="testname"><br>

            directive:<xingoo name="testname"></xingoo>

        </div>

        <script type="text/javascript">

            var myAppModule = angular.module("myApp",[]);

            myAppModule.controller("myAppCtrl",['$scope',function($scope){

                $scope.testname="my name is xingoo";

            }]);

            myAppModule.directive("xingoo",function(){

                return {

                    restrict:'AE',

                    scope:{

                        name:'='

                    },

                    template:'<input type="text" ng-model="name">',

                    repalce:true

                }

            })

        </script>

    </body>

</html>

　　在上面的代码中，可以看到

　　1 在控制器myAppCtrl对应的div中，定义了一个变量ng-model —— testname。

　　2 testname对应的是输入框中输入的值。

　　3 然后把这个变量当做一个参数传递给xingoo这个标签的name属性。

　　4 在xingoo标签中，又把这个name绑定到模板中的一个输入框内。

　　最终两个输入框的内容被连接起来，无论改变哪一个输入框内的值，testname与name都会发生改变。

　　通过下面这张图可以看出来：

　　在指令中通过scope指定say绑定规则是变量的绑定方式。

　　最终通过xingoo标签内的属性依赖关系把 testname与name连接在一起：

　　

　　最后是基于方法的绑定：&操作符

　　上面展示了基于字符串和变量的绑定方法，下面看看基于方法的绑定：

<!doctype html>

<html ng-app="myApp">

    <head>

         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

         <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>

    </head>

    <body>

        <div ng-controller="myAppCtrl">

            <xingoo say="sayHello(name)"></xingoo>

            <xingoo say="sayNo(name)"></xingoo>

            <xingoo say="sayYes(name)"></xingoo>

        </div>

        <script type="text/javascript">

            var myAppModule = angular.module("myApp",[]);

            myAppModule.controller("myAppCtrl",['$scope',function($scope){

                $scope.sayHello = function(name){

                    console.log("hello !"+ name);

                };

                $scope.sayNo = function(name){

                    console.log("no !"+ name);

                };

                $scope.sayYes = function(name){

                    console.log("yes !"+ name);

                };

            }]);

            myAppModule.directive("xingoo",function(){

                return {

                    restrict:'AE',

                    scope:{

                        say:'&'

                    },

                    template:'<input type="text" ng-model="username"/><br>'+

                        '<button ng-click="say({name:username})">click</button><br>',

                    repalce:true

                }

            })

        </script>

    </body>

</html>

　　这段代码中scope中的绑定规则变成了&，也就是方法绑定。

　　在body中，通过自定义标签传入了三个方法，分别是sayHello(name),sayNo(name),sayYes(name)，这三个方法都需要一个name变量。

　　在指令的定义中，模板替换成一个输入框，一个按钮：

　　输入框：用于输入username，也就是三个方法需要的参数name。

　　按钮：点击触发函数——通过绑定规则，绑定到相应的方法。

　　

　　也就是说

　　通过say在scope中的定义，angular知道了say对应的是个方法；

　　通过{name:username}的关联，知道了传入的是username。

　　从而交给对应的方法执行。

　　

　　页面效果：

　　参考

　　[1] 大漠穷求，AngularJS实战：http://www.imooc.com/video/3085/0

angular js 指令的数据传递 及作用域数据绑定的更多相关文章

  1. 关于vue.js父子组件数据传递

    vue.js中使用props down,events up的原则进行父子组件间的通信,先来记录下props down,看个例子: <div id="app2"> < ...

  2. angular view之间的数据传递

    之前写过一篇backbone view之间的传递,由于现在在用angular搞开发,现在也来总结一下.在angular 传递数据通俗的讲叫做 广播 ,在一些文章中,也叫做事件的发布与订阅,在angul ...

  3. angular.js的post数据方式

    公司的项目前端部分现在改用angular,一切从头学起,今天记录一下关于数据请求的问题,由于get的请求方式比较简单,与post也类似,所以就单独讲讲post方式. 文档上post数据的写法有好几种, ...

  4. springmvc和js前端的数据传递和接收方式

    在springmvc中controller的结果集可通过json格式传到js前端接受,也可以通过Map传给前端,具体实现如下 1,通过json格式传递 controller层实现如下 @Request ...

  5. angular js 页面修改数据存入数据库

    一.编写service,修改数据要根据ID回显数据 //根据ID查询 public Brand findById(Long id); //修改 public int update(Brand bran ...

  6. angular js 页面添加数据保存数据库

    一.编写实体类Controller层返回数据使用 package entity; import java.io.Serializable; public class Result implements ...

  7. Angular.js指令

    ng-style   <input type="button" value="set color" ng-click="myStyle={col ...

  8. angular.js 中的作用域 数据模型 控制器

    1.angular.js 作为后起之秀的前端mvc框架,他于传统的前端框架都不同,我们再也不需要在html中嵌入脚本来操作对象了.它抽象出了数据模型,控制器及视图. 成功解耦了应用逻辑,数据模型,视图 ...

  9. Angular JS 中 指令详解

    Angular JS的强大功能就在于其可以自定义很多指令,现在就指令做一下详细的剖析. 一个Angular js 指令(directive)需要指定一个唯一的名字(myDirective)和一个函数, ...

随机推荐

  1. switch..case函数的基础使用一

    基本作用:switch中的参数与case的值进行比对,相等则进入case. JDK1.7 switch支持int.Integer.String类型 package com.my.test; impor ...

  2. C++ 面试题整理

    我和朋友们面到的c++试题整理 虚表 static const sizeof 可构造不可继承的类 stl Iterator失效 map vector vector的removed_if 优化 ---- ...

  3. Roy Li的学习和成长自传

    我不知道自己是什么时候从哪里来到这个世界上的,也许是石头里蹦出来的,也许是女娲捏出来的,上帝造出来的.上溯到我记忆的最前端,抱着我的好象 是一个女人,穿着白衣服,白得象石灰一样的那种.以至于后来我被告 ...

  4. D&F学数据结构系列——插入排序

    插入排序(insertion sort) 插入排序由P-1趟(pass)排序组成.对于P=1趟到P=N-1趟,插入排序保证从位置0到位置P-1上的元素为已排序状态.插入排序利用了这样的事实:位置0到位 ...

  5. Ubuntu环境下Hadoop1.2.1, HBase0.94.25, nutch2.2.1各个配置文件一览

    /×××××××××××××××××××××××××××××××××××××××××/ Author:xxx0624 HomePage:http://www.cnblogs.com/xxx0624/ ...

  6. PHP-Phalcon框架中的数据库操作

    > 本文描述了PHP-Phalcon框架中数据库操作方法,主要讨论Phalcon框架的Model组件中的操作方法.更详细的Model介绍请参考:官方文档 1. 连接数据库 在Phalcon框架中 ...

  7. 【PSR规范专题(1)】PSR-0+namespace+spl_autoload_register实现框架模型

    了解命名空间 namespace是PHP5.3版本加入的新特性,用来解决在编写类库或应用程序时创建可重用的代码如类或函数时碰到的两类问题: 用户编写的代码与PHP内部的类/函数/常量或第三方类/函数/ ...

  8. org.apache.common.io-FileUtils详解

    org.apache.common.io---FileUtils详解 getTempDirectoryPath():返回临时目录路径; public static String getTempDire ...

  9. mysql外键级联更新删除

    MySQL支持外键的存储引擎只有InnoDB,在创建外键的时候,要求父表必须有对应的索引,子表在创建外键的时候也会自动创建对应的索引.在创建索引的时候,可以指定在删除.更新父表时,对子表进行的相应操作 ...

  10. Win32 SDK程序创建一些控件（简单调用InitCommonControlsEx，并指定ICC_LISTVIEW_CLASSES控件就可以了）

    在Win32 SDK中创建一些控件的时候需要注意一下(具体是哪些控件请参看MSDN文档中列出来的) /* MSDN:Carries information used to load common co ...