当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. Apache Spark 2.2.0 中文文档 - Spark Streaming 编程指南 | ApacheCN

    Spark Streaming 编程指南 概述 一个入门示例 基础概念 依赖 初始化 StreamingContext Discretized Streams (DStreams)(离散化流) Inp ...

  2. MyEclipse/Eclipse 使用图文详解

    引言 某天在群里看到有小伙伴问MyEclipse/Eclipse的一些使用问题,虽然在我看来,问的问题很简单,但是如果对于刚刚学习的人来说,可能使用就不那么友好了.毕竟我在开始使用MyEclipse/ ...

  3. Apache CXF入门

    CXF简介 Apache CXF = Celtix + XFire,开始叫 Apache CeltiXfire,后来更名为 Apache CXF 了.CXF 继承了 Celtix 和 XFire 两大 ...

  4. Writing Science 7.10 (The Opening and The Funnel)

    Opening: 1.文章的第一句话必须要达到如下目标:找出推动研究的问题,介绍内容,并确定本文针对的观众.如果你足够聪明的话甚至可以将遇到的挑战以及结论写进来. 2.通过第一段话建立本文的重点和基调 ...

  5. snmp之GenericAddress

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

  6. python---random模块使用详解

    random与随机操作有关的模块 常用方法: random() --- 返回0-1之见得一个随机浮点数. 调用:random.random() 例如: >>> random.rand ...

  7. windows下创建Python虚拟环境

    windows下创建Python虚拟环境 说明 由于Python的版本众多,还有Python2和Python3的争论,因此有些软件包或第三方库就容易出现版本不兼容的问题. 通过 virtualenv ...

  8. [mysql]ERROR 1364 (HY000): Field 'ssl_cipher' doesn't have a default value 解决方法

    在MySQL数据库中的mysql.user表中使用insert语句添加新用户时,可能会出现以下错误: ERROR 1364 (HY000): Field 'ssl_cipher' doesn't ha ...

  9. 【转】HTTP Header 详解

    HTTP(HyperTextTransferProtocol)即超文本传输协议,目前网页传输的的通用协议.HTTP协议采用了请求/响应模型,浏览器或其他客户端发出请求,服务器给与响应.就整个网络资源传 ...

  10. 基于RTKLIB构建高并发通信测试工具

    1. RTKLIB基础动态库生成 RTKLIB是全球导航卫星系统GNSS(global navigation satellite system)的标准&精密定位开源程序包,由日本东京海洋大学的 ...