当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. 关于memcached的那些事儿

    一.前言 目前,memcached + mysql的这种存储组合,被广泛地应用到“读多写少”的应用场景上.那么在使用memcached的时候,我们需要注意哪些问题呢? 下面我们来探讨下使用memcac ...

  2. mysql水平分表和垂直分表的优缺点

    表分割有两种方式: 1.水平分割:根据一列或多列数据的值把数据行放到两个独立的表中. 水平分割通常在下面的情况下使用. •表很大,分割后可以降低在查询时需要读的数据和索引的页数,同时也降低了索引的层数 ...

  3. Angular2响应式表单

    本文将半翻译半总结的讲讲ng2官网的另一个未翻译高级教程页面. 原文地址. 文章目的是使用ng2提供的响应式表单技术快速搭出功能完善丰富的界面表单组件. 响应式表单是一项响应式风格的ng2技术,本文将 ...

  4. GCD之死锁体会

    1.先看下几句代码 1 2 3 4 5 6 7 dispatch_queue_t serialqueue=dispatch_queue_create("serialqueue", ...

  5. memcached readme

    memcache======== http://www.cnblogs.com/jeffwongishandsome/archive/2011/11/06/2238265.html # 命令 ## 存 ...

  6. snmp之GenericAddress

    GenericAddress 注册地址类型,而不是默认的,第一次调用解析(java.lang.String的)方法之前,设置系统属性ADDRESS_TYPES_PROPERTIES. 这个类涉及到了工 ...

  7. linux上搭建ftp

    linux上搭建ftp 重要 解决如何搭建ftp         解决用户指定访问其根目录         解决访问ftp超时连接         解决ftp主动连接.被动连接的问题 1.安装ftp ...

  8. Asp.net中防止用户多次登录的方法

    在web开发时,有的系统要求同一个用户在同一时间只能登录一次,也就是如果一个用户已经登录了,在退出之前如果再次登录的话需要报错. 常见的处理方法是,在用户登录时,判断此用户是否已经在Applicati ...

  9. Hadoop就是一个别人造好的轮子

    这个想法源自于我看了<Hadoop: The Definitive Guide>的Part I Ch 2中MapReduce的引入和介绍,书中先说了怎么通过原始的办法处理数据,然后引入到如 ...

  10. vim环境设置(应用于python编程)

    1. 安装完整的vim # apt-get install vim-gnome 2. 安装ctags,ctags用于支持taglist,必需! # apt-get install ctags 3. 安 ...