angularjs 指令—— 绑定策略（@、=、&）

引入主题背景：angular 的指令配置中的template可以直接使用硬编码写相应的代码，不过也可以根据变量，进行动态更新。那么需要用到那些变量，因用法的不同，所以需要设置合适的绑定策略。

一、@ 绑定策略

@ 绑定策略，它的作用就是能把指令配置的独立Scope下变量的值等于根据@绑定的指令属性的值。（指令属性的值可以使用表达式，但是得出来的值一定是字符串。）

1、上代码：

html代码

  1. <!DOCTYPE html>
  2. <htmllang="en"ng-app="myApp">
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>myDirective</title>
  6. </head>
  7. <body>
  8. <inputtype="text"ng-model="myUrl">
  9. <divmy-directivemy-url="{{myUrl}}"my-link-text="click me"></div> ①
  11. </body>
  12. <scriptsrc="../../common/angular-1.0.1.min.js"></script>
  13. <scriptsrc="./demo1.js"></script>
  14. </html>

js代码

  1. angular.module('myApp',[])
  2. .directive('myDirective',function(){
  3. return{
  4. restrict:'A',//属性方式
  5. replace:true,
  6. scope:{
  7. myUrl:'@',//@绑定策略(默认绑定到 my-url指令属性)
  8. myLinkText:'@'//@绑定策略(默认绑定到 my-link-text 指令属性)
  9. },
  10. template:'<a href="{{myUrl}}">{{ myLinkText }}</a>'
  11. }
  12. });

2、 解释：

  • 在上面的代码中，我创建了一个指令myDirective 该指令创建了两个变量 myUrl、myLinkText,并且这俩个变量都是采用@绑定策略。

  • 说一下，不管是@、=还是&绑定策略，它们都有一个默认的方式，以@绑定策略为例，如上面代码那么样:myUrl:'@'，直接用一个@表示绑定的方式，它就会默认得将指令属性my-url的值赋值给myUrl变量。当然，你不想使用默认的方式，也就是说，你不想myUrl变量绑定my-url的值，而想要绑定其它属性名的值，那么你可以在@后加上你希望的属性名（格式要求：驼峰式）。如，我想讲myUrl绑定到<myDirective></myDirective>指令的some-attr属性的值，那么你可以这样写：myUrl:'@someAttr'。

  • 那么我们知道了指令的myUrl变量的值是如何来的，那么我们要如何在template中使用它呢？这个很简单，看上面的代码就能很明白了，我们在template中的代码中需要用表达式的方式对其引用{{myUrl}}，这样我们就能够使用到myUrl变量的值了~

3、 小结：

  • @ 绑定策略只能绑定（或者理解成传递）字符串值。要想传递方法(&)或者实现双向数据绑定(=)等操作，就得需要使用其它俩样的绑定方式咯

教程对@、=、&的讲解：
　　为了让新的指令作用域可以访问当前本地作用域中的变量，需要使用下面三种别名中的一种。
　　1. 本地作用域属性：使用@符号将本地作用域同DOM属性的值进行绑定。指令内部作用域可以使用外部作用域的变量：
　　@ (or @attr)
　　现在，可以在指令中使用绑定的字符串了。

　　2. 双向绑定：通过=可以将本地作用域上的属性同父级作用域上的属性进行双向的数据绑定。就像普通的数据绑定一样，本地属性会反映出父数据模型中所发生的改变。
　　= (or =attr)

　　3. 父级作用域绑定 通过&符号可以对父级作用域进行绑定，以便在其中运行函数。意味着对这个值进行设置时会生成一个指向父级作用域的包装函数。
　　要使调用带有一个参数的父方法，我们需要传递一个对象，这个对象的键是参数的名称，值是要传递给参数的内容。
　　& (or &attr)

angularjs 指令—— 绑定策略（@、=、&）的更多相关文章

  1. AngularJS 指令绑定 & 简介

    指令中独立scope 的 & 官方说明: 1. 绑定表达式 2. 经常用来绑定回调函数 诡异的地方在于,这个 & 某次听人说在子组件中是不能传值给callback的,好奇查了一下官方文 ...

  2. angularjs中的绑定策略“@”，“=”，“&”实例

    <!DOCTYPE html> <html lang="zh-CN" ng-app="app"> <head> <me ...

  3. 解析angularjs中的绑定策略

    一.首先回顾一下有哪些绑定策略? 看这个实在是有点抽象了,我们来看具体的实例分析吧! 二.简单的Demo实例 @绑定:传递一个字符串作为属性的值.比如 str : ‘@string’ 控制器中代码部分 ...

  4. AngularJS学习笔记之directive—scope选项与绑定策略

    From:http://www.linuxidc.com/Linux/2015-05/116924.htm scope:{}使指令与外界隔离开来,使其模板(template)处于non-inherit ...

  5. AngularJS学习笔记之directive——scope选项与绑定策略

    开门见山地说,scope:{}使指令与外界隔离开来,使其模板(template)处于non-inheriting(无继承)的状态,当然除非你在其中使用了transclude嵌入,这点之后的笔记会再详细 ...

  6. angular指令中的scope绑定策略

    针对独立 scope,可以通过在对象中声明如何从外部传入参数.有以下三种绑定策略: @ - 使用 DOM 属性值单项绑定到指令 scope 中.此时绑定的值总是一个字符串,因为 DOM 的属性值是一个 ...

  7. angularJs指令深度分析

    AngularJs的指令定义大致如下 angular.module("app",[]).directive("directiveName",function() ...

  8. angularjs指令(二)

    最近学习了下angularjs指令的相关知识,也参考了前人的一些文章,在此总结下. 欢迎批评指出错误的地方.   Angularjs指令定义的API AngularJs的指令定义大致如下 angula ...

  9. angularJS 指令二

    指令详解1.用directive()方法来定义指令.directive('myDirective',function($timeout,userDefinedService){ return {};} ...

随机推荐

  1. Shell最多可以输入多少个参数？

    在脚本编写过程中,通常会涉及到参数的输入.譬如,sh 1.sh 10 20,在执行1.sh这个脚本中,10即为第一个参数,20即为第二个参数.有时,就会有这个疑惑,即shell脚本最多可以支持多少个变 ...

  2. Android 学习之路

    转载:http://stormzhang.com/android/2014/07/07/learn-android-from-rookie/ 这篇博客背后的故事 一路走来很不容易,刚好知乎上被人邀请回 ...

  3. 赞！15个来自 CodePen 的酷炫 CSS 动画效果

    CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...

  4. 百度，淘宝，腾讯三大巨头HTML页面规范分解

    [兼容html5方案] 百度贴吧,百度图片的实现 <!--[if lt IE 9]> <script> (function(){ var tags = ['header','f ...

  5. javascript学习总结（一）：基础知识。

    1 数据类型a.数据类型共有7种,字符串(string).数字(number).布尔(boolean).数组(array).对象(object).Null.Undefined. 其中布尔(逻辑)类型只 ...

  6. 在springmvc中配置jedis：

    主要学习https://github.com/thinkgem/jeesite.一下代码均参考于此并稍作修改. 1.jedis 首先,需要添加jedis: <!--jedis--> < ...

  7. Redis Lua脚本原理

    2.6版本之后支持嵌入Lua脚本,客户端使用Lua脚本,直接在服务器端原子的执行多条命令 Lua脚本执行过程 创建并修改Lua环境 1 创建基础Lua环境 2 载入函数库 3 创建全局表格Lua 4 ...

  8. 第3/24周 区_SQL Server中管理空间的基本单位

    哇哦,SQL Server性能调优培训已经进入第3周了!同时你已经对SQL Server内核运行机制有了很好的认识.今天我会讲下SQL Server中的区管理,因为这是个很重要的话题,我们会在第23周 ...

  9. Emit学习(4) - Dapper解析之数据对象映射(一)

    感觉好久没有写博客了, 这几天有点小忙, 接下来会更忙, 索性就先写一篇吧. 后面估计会有更长的一段时间不会更新博客了. 废话不多说, 先上菜. 一.示例 1. 先建类, 类的名称与读取的表名并没有什 ...

  10. AES加密类

    代码: using System; using System.IO; using System.Security.Cryptography; using System.Text; namespace ...