我已经仔细阅读了AngularJS关于这个主题的文档,然后摆弄了一个指令。这是小提琴。
以下是一些相关片段:
来自HTML:
<窗格bi-title = "标题" title =“{{标题}}>{{文本}}> < /窗格
从窗格指令:
scope: {biTitle: '=', title: '@', bar: '='},
有几件事我不明白:
为什么我必须使用“{{title}}”与“@”和“title”与“=”?
我也可以直接访问父范围,而不装饰我的元素与属性?
文档说:“通常情况下,通过表达式将数据从孤立的作用域传递到父作用域是可取的”,但这似乎也适用于双向绑定。为什么表达式路由会更好呢?
我发现另一个小提琴,显示表达式解决方案太:http://jsfiddle.net/maxisam/QrCXh/
@ local scope属性用于访问在指令外部定义的字符串值。
在需要在外部作用域和指令的隔离作用域之间创建双向绑定的情况下,可以使用=字符。
& local作用域属性允许指令的使用者传入指令可以调用的函数。
请查看下面的链接,它会用例子让你清楚地理解。我发现它真的很有用,所以想分享它。
http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-2-isolate-scope
为什么我必须使用“{{title}}”与“@”和“title”与“=”?
当你使用{{title}}时,只有父范围值将被传递给指令视图并计算。这仅限于一种方式,这意味着更改不会反映在父范围中。当你想要将在子指令中所做的更改反映到父作用域时,你也可以使用'='。这是双向的。
我也可以直接访问父范围,而不装饰我
元素的属性?
当指令中有scope属性(scope:{})时,你将不能再直接访问父作用域。但是仍然可以通过作用域访问它。美元的父母等等。如果从指令中删除作用域,则可以直接访问它。
文档中说:“通常需要从
隔离作用域通过表达式和父作用域”,但是
似乎工作与双向绑定也很好。为什么
表达路线更好吗?
这取决于上下文。如果你想调用带有数据的表达式或函数,你可以使用&,如果你想共享数据,你可以使用双向的方式使用'='
你可以在下面的链接中找到传递数据到指令的多种方式之间的差异:
AngularJS -隔离作用域- @ vs = vs &
http://www.codeforeach.com/angularjs/angularjs-isolated-scopes-vs-vs
如果您想通过一个现场示例了解更多这是如何工作的。http://jsfiddle.net/juanmendez/k6chmnch/
var app = angular.module('app', []);
app.controller("myController", function ($scope) {
$scope.title = "binding";
});
app.directive("jmFind", function () {
return {
replace: true,
restrict: 'C',
transclude: true,
scope: {
title1: "=",
title2: "@"
},
template: "<div><p>{{title1}} {{title2}}</p></div>"
};
});
即使作用域是本地的,就像在您的例子中,您也可以通过属性$parent访问父作用域。假设在下面的代码中,标题是在父作用域上定义的。然后你可以通过$parent.title访问title:
link : function(scope) { console.log(scope.$parent.title) },
template : "the parent has the title {{$parent.title}}"
但是,在大多数情况下,使用属性可以更好地获得相同的效果。
我发现“&”符号的一个例子是在ng-repeat中渲染特殊数据结构的指令中,它用于“通过表达式将数据从隔离作用域传递到父作用域”,很有用(并且不能使用双向数据绑定)。
<render data = "record" deleteFunction = "dataList.splice($index,1)" ng-repeat = "record in dataList" > </render>
渲染的一部分是删除按钮,这里通过&从外部作用域附加一个删除函数很有用。在渲染指令中,它是这样的
scope : { data = "=", deleteFunction = "&"},
template : "... <button ng-click = "deleteFunction()"></button>"
2-way数据绑定,即data =" ="不能被使用,因为delete函数会在每个$digest周期上运行,这是不好的,因为记录会立即被删除,并且永远不会呈现。