当directive中的scope设置为一个对象的时候，该指令就有了一个独立的作用域，AngularJS提供了一种绑定策略用于隔离作用域和外部作用域进行通信。

1、@（or @attr）

使用@符号可以进行单项的数据绑定，取值总是一个字符串，所以要用{{}}。

另外这也是一个单向的绑定，外部数据改变会反应到内部，但是内部数据变数据变化，外部不会变。

属性要用-连接，scope中写它的驼峰格式。

如果没有通过@attr指定属性名称，那么本地名称要与DOM属性的名称一致。

<!DOCTYPE html>

<html ng-app="myApp">

<head>

	<meta charset="utf-8">

	<title>AngularJS</title>

</head>

<body>

	<div ng-controller="parent">

		<div>

			<input type="text" ng-model="name"/>

		</div>

		<my-name show-name="{{name}}">

		</my-name>

	</div>

</body>

<script type="text/javascript" src="angular.min.js"></script>

<script type="text/javascript">

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

	app.controller("parent", function($scope){

		$scope.name = "Jhon";

	}).directive("myName", function(){

		return {

			restrict:"EA",

			scope:{

				showName: '@'

				// name: '@showName'

			},

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

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

		}

	});

</script>

</html>

2、= （or =attr）

使用=进行双向数据绑定，任何一方的值改变都会反应到另一方。因为是双向绑定，所以不要使用{{}}，不然以下demo会报错。

属性要用-连接，scope中写它的驼峰格式。

如果没有通过@attr指定属性名称，那么本地名称要与DOM属性的名称一致。

<!DOCTYPE html>

<html ng-app="myApp">

<head>

	<meta charset="utf-8">

	<title>AngularJS</title>

</head>

<body>

	<div ng-controller="parent">

		<div>

			<input type="text" ng-model="name"/>

		</div>

		<my-name show-name="name">

		</my-name>

	</div>

</body>

<script type="text/javascript" src="angular.min.js"></script>

<script type="text/javascript">

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

	app.controller("parent", function($scope){

		$scope.name = "Jhon";

	}).directive("myName", function(){

		return {

			restrict:"EA",

			scope:{

				showName: '='

			},

			template:'<input type="text" ng-model="showName"/>'

		}

	});

</script>

</html>

3、&（or &attr）

&用来绑定外部的函数。

属性要用-连接，scope中写它的驼峰格式。

如果没有通过@attr指定属性名称，那么本地名称要与DOM属性的名称一致。

<!DOCTYPE html>

<html ng-app="myApp">

<head>

	<meta charset="utf-8">

	<title>AngularJS</title>

</head>

<body>

	<div ng-controller="parent">

		<div>

			<input type="text" ng-model="count"/>

		</div>

		<my-name show-name="increment()">

		</my-name>

	</div>

</body>

<script type="text/javascript" src="angular.min.js"></script>

<script type="text/javascript">

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

	app.controller("parent", function($scope){

		$scope.count = 0;

		$scope.increment = function(){

			$scope.count++;

		};

	}).directive("myName", function(){

		return {

			restrict:"EA",

			scope:{

				showName: '&'

			},

			template:'<input type="button" ng-click="showName()" value="+1"/>'

		}

	});

</script>

</html>

angular指令中@，=，&的区别的更多相关文章

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

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

  2. angular指令中使用ngModelController

    在这篇文章中 angular学习笔记(三十)-指令(10)-require和controller 说到了通过require属性和controller参数来让指令与指令之间互相交互. 本篇主要介绍的是指 ...

  3. angular指令中，require和transclude同时设置为true时的作用

    最近在学习angularJS指令的时候,对指令对象中require属性和transclude属性同时设置为true比较疑惑,于是自己动手测试一下具体差异 index.html: <simple& ...

  4. angular指令中的preLink函数和postLink函数

    指令模板选项有complie和link两个字段,两者之间存在如下关系: 当compile字段存在时,link字段将被忽略,compile函数的返回值将作为link字段. 当compile不存在,lin ...

  5. angular 指令@、=、&的用法和区别

    1.指令作用域中的@ 作用是把当前属性作为字符串传递. html: <div ng-controller="MyCtrl"> <drink water=" ...

  6. (网页)Angular.js 中 copy 赋值与 = 赋值 区别

    转自st.gg Angular.js 中 copy 赋值与 = 赋值 区别 为什么用 $scope.user = $scope.master; $scope.master 会跟着 $scope.use ...

  7. angularjs指令中scope参数 true、false、{} 的区别详解

    scope 有三个参数 true.false.{} scope 默认是 false,当 scope设置为true时,会从父作用域继承并创建一个新的作用域对象, 按照true .false的反向思维,我 ...

  8. Angular JS 中 指令详解

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

  9. angularjs指令中的compile与link函数详解（转）

    http://www.jb51.net/article/58229.htm 通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link, ...

随机推荐

  1. 前端里移动端到底比pc端多哪些知识?

    端里移动端到底比pc端多哪些知识,为啥面试时好多公司都问h5水平如何? 我做过几年的web前端开发,就简单谈谈自己的感受吧.首先来看看PC端和移动端在前端开发上的一些区别:(1)PC考虑的是浏览器兼容 ...

  2. Unitty 3D 贪吃蛇 今日小记 -- 碰撞

    当蛇头碰撞到蛋的时候  应该让蛋消失并且重新创建蛋. void OnTriggerEnter    可以使用这个方法 下面附有这个方法的介绍 其次需要对挂载在之上的Object  check IsTr ...

  3. jmeter3.3测试需要登录的接口（java）

    1.新建线程组-略过 2.右键线程组->添加->配置元件->HTTP授权管理器 3.右键线程组->添加->配置元件->HTTP信息头管理器 4.右键线程组-> ...

  4. android studio集成ijkplayer

    介绍 ijkplayer是一款非常火的开源视频播放器,android和IOS通用.关于怎么编译怎么导入android Studio中自己的项目,其中坑很多,本篇记录下自己的操作记录.ijkplayer ...

  5. 第6章 Overlapped I/O， 在你身后变戏法 ---Win32 文件操作函数 -2

    Win32 之中有三个基本的函数用来执行 I/O,它们是:        i CreateFile()        i ReadFile()        i WriteFile()    没有另外 ...

  6. 初始Socket编程（python）

    通信双方要有一个服务端和一个客户端,所以要分开去写代码. 所以我创建了两个py程序,第一个是服务端:iServer.py 和客户端 iClient.py 服务端: #coding:utf-8from ...

  7. Conscription poj3723（最大生成树）

    Conscription Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 6870   Accepted: 2361 Desc ...

  8. poj3070矩阵快速幂

    Fibonacci Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 7752   Accepted: 5501 Descrip ...

  9. hdu4678 Mine 2013 Multi-University Training Contest 8 博弈题

    Mine Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others) Total Submi ...

  10. I/O输入输出流

    I/O(输入/输出) 在变量.数组和对象中存储的数据是暂时存在的,程序结束后它们就会消失.为了能够永久地保存创建的数据,需要将其保存在磁盘文件中,这样可以在其他程序中使用它们. Java的I/O技术可 ...