当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. 14.LINUX-platform机制实现驱动层分离(详解)

    版权声明:本文为博主原创文章,未经博主允许不得转载. 本节目标:        学习platform机制,如何实现驱动层分离 1.先来看看我们之前分析输入子系统的分层概念,如下图所示: 如上图所示,分 ...

  2. Python 接口测试（四）

    五:python数列化和反序列化 把python的对象编码转换为json格式的字符串,反序列化可以理解为:把json格式 字符串解码为python数据对象.在python的标准库中,专门提供了json ...

  3. React获得真实的DOM操作

    真实的DOM操作 ------------------------------------------------------------------------------------------- ...

  4. 一个完整的Node.js RESTful API

    前言 这篇文章算是对Building APIs with Node.js这本书的一个总结.用Node.js写接口对我来说是很有用的,比如在项目初始阶段,可以快速的模拟网络请求.正因为它用js写的,跟i ...

  5. vue练手小项目--眼镜在线试戴

    最近看到了一个眼镜在线试戴小项目使用纯js手写的,本人刚学习vue.js没多久,便试试用vue做做看了,还没完善. 其中包括初始图片加载,使用keywords查找,父子组件之间传递信息,子组件之间传递 ...

  6. Hex to Int 【十六进制转十进制】

    long HexToInt(char *msgline){    long strlength,chvalue,tvalue;    WORD i;    chvalue=0;    strlengt ...

  7. ThinkPHP5高阶实战教程

    tp5项目:https://www.kancloud.cn/mikkle/thinkphp5_study/396283

  8. Drying poj3104（二分）

    Drying Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 7916   Accepted: 2006 Descriptio ...

  9. MySQL show status 参数详解

    状态名 作用域 详细解释 Aborted_clients Global 由于客户端没有正确关闭连接导致客户端终止而中断的连接数 Aborted_connects Global 试图连接到MySQL服务 ...

  10. C#实现基于ffmepg加虹软的人脸识别

    关于人脸识别 目前的人脸识别已经相对成熟,有各种收费免费的商业方案和开源方案,其中OpenCV很早就支持了人脸识别,在我选择人脸识别开发库时,也横向对比了三种库,包括在线识别的百度.开源的OpenCV ...