angularjs 指令—— 绑定策略（@、=、&）
angularjs 指令—— 绑定策略（@、=、&）
引入主题背景：angular 的指令配置中的template可以直接使用硬编码写相应的代码，不过也可以根据变量，进行动态更新。那么需要用到那些变量，因用法的不同，所以需要设置合适的绑定策略。
一、@ 绑定策略
@ 绑定策略，它的作用就是能把指令配置的独立Scope下变量的值等于根据@绑定的指令属性的值。（指令属性的值可以使用表达式，但是得出来的值一定是字符串。）
1、上代码：
html代码
<!DOCTYPE html><htmllang="en"ng-app="myApp"><head><metacharset="UTF-8"><title>myDirective</title></head><body><inputtype="text"ng-model="myUrl"><divmy-directivemy-url="{{myUrl}}"my-link-text="click me"></div> ①</body><scriptsrc="../../common/angular-1.0.1.min.js"></script><scriptsrc="./demo1.js"></script></html>
js代码
angular.module('myApp',[]).directive('myDirective',function(){return{restrict:'A',//属性方式replace:true,scope:{myUrl:'@',//@绑定策略(默认绑定到 my-url指令属性)myLinkText:'@'//@绑定策略(默认绑定到 my-link-text 指令属性)},template:'<a href="{{myUrl}}">{{ myLinkText }}</a>'}});
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 指令—— 绑定策略（@、=、&）的更多相关文章
- AngularJS 指令绑定 & 简介
指令中独立scope 的 & 官方说明: 1. 绑定表达式 2. 经常用来绑定回调函数 诡异的地方在于,这个 & 某次听人说在子组件中是不能传值给callback的,好奇查了一下官方文 ...
- angularjs中的绑定策略“@”，“=”，“&”实例
<!DOCTYPE html> <html lang="zh-CN" ng-app="app"> <head> <me ...
- 解析angularjs中的绑定策略
一.首先回顾一下有哪些绑定策略? 看这个实在是有点抽象了,我们来看具体的实例分析吧! 二.简单的Demo实例 @绑定:传递一个字符串作为属性的值.比如 str : ‘@string’ 控制器中代码部分 ...
- AngularJS学习笔记之directive—scope选项与绑定策略
From:http://www.linuxidc.com/Linux/2015-05/116924.htm scope:{}使指令与外界隔离开来,使其模板(template)处于non-inherit ...
- AngularJS学习笔记之directive——scope选项与绑定策略
开门见山地说,scope:{}使指令与外界隔离开来,使其模板(template)处于non-inheriting(无继承)的状态,当然除非你在其中使用了transclude嵌入,这点之后的笔记会再详细 ...
- angular指令中的scope绑定策略
针对独立 scope,可以通过在对象中声明如何从外部传入参数.有以下三种绑定策略: @ - 使用 DOM 属性值单项绑定到指令 scope 中.此时绑定的值总是一个字符串,因为 DOM 的属性值是一个 ...
- angularJs指令深度分析
AngularJs的指令定义大致如下 angular.module("app",[]).directive("directiveName",function() ...
- angularjs指令(二)
最近学习了下angularjs指令的相关知识,也参考了前人的一些文章,在此总结下. 欢迎批评指出错误的地方. Angularjs指令定义的API AngularJs的指令定义大致如下 angula ...
- angularJS 指令二
指令详解1.用directive()方法来定义指令.directive('myDirective',function($timeout,userDefinedService){ return {};} ...
随机推荐
- MongoDB的学习--聚合
最近要去的新项目使用mysql,趁着还没忘记,总结记录以下MongoDB的聚合. 聚合是泛指各种可以处理批量记录并返回计算结果的操作.MongoDB提供了丰富的聚合操作,用于对数据集执行计算操作.在 ...
- dp --- hdu 4939 : Stupid Tower Defense
Stupid Tower Defense Time Limit: 12000/6000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/ ...
- RichTextBoxEx
using System; using System.Collections.Specialized; using System.Drawing; using System.Drawing.Imagi ...
- Dapper学习 - Dapper的基本用法(三) - CUD
之前介绍了Dapper的查询, 存储过程, 函数的调用, 接下来要说一下Dapper的增删改, 其实Dapper的增删改, 都是同一种模式的. 我就不分开介绍了, 直接在一个例子上展现好了. var ...
- 基于WinCE的JSON 类库 源码
基于WinCE的JSON 类库,可以将对象序列化成字符串和文件. 提示,其在反序列化时有一个BUG: 如果对象的某个字段值为 null,将其序列化成字符串,然后将该字符串反序列化成对象时会报异常. 这 ...
- jQuery的Ajax请求数据时type无法使用GET
写一个ASP.NET MVC例子,它是使用jQuery的$.Ajax来呼叫控制器的数据. 创建一个视图: 运行结果: 一切正常,但是本例子我们只是获取数据,并没有做任何数据POST上传至控制器,我们尝 ...
- Ajax实现定时刷新页面
function deleteValue(){ var refresh = function() { $.ajax({ type:'post', url:'/Application/index ...
- SSH实例(7)
运行结果. 浏览课程: 添加课程: 还有删除课程,这里就不演示了.
- [iOS] Delphi for iOS 版本需求
Delphi iOS 版本需求 版本 版本需求 官网 备注 Delphi 10.1 Berlin iPod Touch, iPhone, or iPad iOS 8 iOS 9 http://docw ...
- springmvc中RequestMapping的解析
在研究源码的时候,我们应该从最高层来看,所以我们先看这个接口的定义: package org.springframework.web.servlet; import javax.servlet.htt ...