当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. 关于APP分享到QQ、微信等

    <script> var shares=null;        var Intent=null,File=null,Uri=null,main=null; function plusRe ...

  2. 交互模式下测试python代码及变量的四则运算

    在交互模式下,python代码可以立即执行,所以这很方便我们进行代码测试 1.命令窗口,输入python (如果没配置环境变量则需带python安装目录的绝对路径) >>> 这个就是 ...

  3. GitHub开源：升讯威微信营销系统（第三方微信平台）完整源代码

    GitHub:https://github.com/iccb1013/Sheng.WeixinConstruction 升讯威微信营销系统开发实践系列升讯威微信营销系统开发实践:(1)功能设计与架构设 ...

  4. Apache服务器处理404错误页面技巧

    1.打开Apache目录,查找httpd.conf文件 2.打开httpd.conf文件,找到<Directory "    "></Directory>这 ...

  5. SQL Server 2016 Alwayson新增功能

    标签:SQL SERVER/MSSQL SERVER/数据库/DBA/ 概述 SQLServer2016发布版本到现在已有一年多的时间了,目前最新的稳定版本是SP1版本.接下来就开看看2016在Alw ...

  6. java集合系列——Set之HashSet和TreeSet介绍（十）

    一.Set的简介 Set是一个不包含重复元素的 collection.更确切地讲,set 不包含满足 e1.equals(e2) 的元素.对 e1 和 e2,并且最多包含一个为 null 的元素. S ...

  7. spark与hive的集成

    一:介绍 1.在spark编译时支持hive 2.默认的db 当Spark在编译的时候给定了hive的支持参数,但是没有配置和hive的集成,此时默认使用hive自带的元数据管理:Derby数据库. ...

  8. CentOS7 +vsftpd （一）之 匿名

    CentOS7 +vsftpd (一)之 匿名 ftp的搭建是一个基础性的工作,CentOS7 +vsftpd 是一个比较容易实现的平台,但在搭建中问题会不少,本系列将通过四篇随笔与大家分享. 一.C ...

  9. python之路第五篇之模块和加密算法（进阶篇：续）

    模块 Python中,如果要引用一些内置的函数,该怎么处理呢?在Python中有一个概念叫做模块(module) 简单地说,模块就是一个保存了Python代码的文件. 模块分类: 1)内置模块 2)自 ...

  10. mysql慢查询分析工具 mysqlsla 安装

    概述 mysqlsla 是一款很不错的mysql慢查询日志分析工具,而且简单易用.mysqlsla 是用perl编写的脚本,运行需要perl-DBI和per-DBD-Mysql两模块的支持.mysql ...