我已经仔细阅读了AngularJS关于这个主题的文档，然后摆弄了一个指令。这是小提琴。
以下是一些相关片段:
来自HTML: <窗格bi-title = "标题" title =“{{标题}}>{{文本}}> < /窗格 从窗格指令: scope: {biTitle: '='， title: '@'， bar: '='}，
有几件事我不明白:
为什么我必须使用“{{title}}”与“@”和“title”与“=”? 我也可以直接访问父范围，而不装饰我的元素与属性? 文档说:“通常情况下，通过表达式将数据从孤立的作用域传递到父作用域是可取的”，但这似乎也适用于双向绑定。为什么表达式路由会更好呢?
我发现另一个小提琴，显示表达式解决方案太:http://jsfiddle.net/maxisam/QrCXh/
当前回答
他们之间的主要区别是
@ Attribute string binding
= Two-way model binding
& Callback method binding
其他回答
我们可以简单地使用:-
@:-用于单向数据绑定的字符串值。在一种方式中，数据绑定只能将作用域值传递给指令 =:- for对象值用于双向数据绑定。数据绑定有两种方式，你可以在指令和HTML中改变作用域值。 &:-用于方法和函数。
EDIT
在Angular 1.5及以上版本的组件定义中 有四种不同类型的绑定:
=双向数据绑定:-如果我们改变了值，它会自动更新 <单向绑定:-当我们只想从父作用域读取参数而不更新它时。 @这是字符串参数 &这是为了回调，以防你的组件需要输出一些东西到它的父作用域
@属性字符串绑定(单向) =双向模型绑定 &回调方法绑定
我创建了一个小的HTML文件，里面有Angular代码来演示它们之间的区别:
<!DOCTYPE html>
<html>
<head>
<title>Angular</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl as VM">
<a my-dir
attr1="VM.sayHi('Juan')" <!-- scope: "=" -->
attr2="VM.sayHi('Juan')" <!-- scope: "@" -->
attr3="VM.sayHi('Juan')" <!-- scope: "&" -->
></a>
</div>
<script>
angular.module("myApp", [])
.controller("myCtrl", [function(){
var vm = this;
vm.sayHi = function(name){
return ("Hey there, " + name);
}
}])
.directive("myDir", [function(){
return {
scope: {
attr1: "=",
attr2: "@",
attr3: "&"
},
link: function(scope){
console.log(scope.attr1); // =, logs "Hey there, Juan"
console.log(scope.attr2); // @, logs "VM.sayHi('Juan')"
console.log(scope.attr3); // &, logs "function (a){return h(c,a)}"
console.log(scope.attr3()); // &, logs "Hey there, Juan"
}
}
}]);
</script>
</body>
</html>
=方法是双向绑定，它允许你在指令中进行实时更改。当有人在指令外更改变量时，你将在指令内拥有更改的数据，但@ way不是双向绑定。它像文本一样工作。你绑定一次，你就只有它的值。
为了更清楚地理解它，你可以使用这篇很棒的文章:
AngularJS指令作用域'@'和'='
我一次性实现了所有可能的选项。
它处理所有的选项:
scope:{
name:'&'
},
scope:{
name:'='
},
scope:{
name:'@'
},
scope:{
},
scope:true,
https://jsfiddle.net/rishulmatta/v7xf2ujm
