Angular 自定义 directive,scope 对新手来说可有可无

2014 年 2 月 19 日
 coolicer
首先在书上的例子:
<div ng-cont rol l er=' SomeCont rol l er' >
<expander cl ass=' expander' expander-t i t l e=' t i t l e' >
{{t ext }}
</ expander>
</ di v>

angular. modul e(' expanderModul e' , [ ] )
. di rect i ve(' expander' , functi on(){
return {
rest ri ct : ' EA' ,
repl ace: true,
t ranscl ude: true,
scope: { t i t l e: ' =expanderTi tle' },
t empl at e: ' <di v>' +
' <di v cl ass="t i t l e" ng-cl i ck="t oggl e()">{{t i t l e}}</ di v>' +
' <di v cl ass="body" ng-show="showMe" ng-t ranscl ude></ di v>' +
' </ di v>' ,
l i nk: functi on(scope, el ement , at t rs) {
scope. showMe = fal se;
scope. t oggl e = functi on t oggl e() {
scope. showMe = ! scope. showMe;
}
}
}
});
这里的 scope: { t i t l e: ' =expanderTi tle' } 是否可以写成 scope: {title:'@'},因为父scope中有title。如果是按书中的写法,是找到父scope的expanderTitle属性,再取它的值title,再对应$scope.title? =。=

从pdf复制过来,有点难看。
4289 次点击
所在节点    JavaScript
8 条回复
ijse
2014 年 2 月 19 日
不可以哦。。

@ 是字符绑定
= 是双向绑定
& 是单向绑定
coolicer
2014 年 2 月 19 日
@ijse 你的解析怎么跟书上不一样,书上说

@ 传递字符
= 把父scope属性导入到子scope
& 引入父scope的一个函数
ijse
2014 年 2 月 19 日
@coolicer 你在看哪本书?

@ 我的意思也是传递字符,只有=是双向绑定的。

=和&都是支持任意类型的
coolicer
2014 年 2 月 19 日
@ijse AngularJS 中文名 《用AngularJS开发下一代web应用》
ijse
2014 年 2 月 19 日
哦哦,, 推荐 《ng-book 》这本书,我觉得讲得更好一些。。
coolicer
2014 年 2 月 19 日
@ijse 已经下载了,这本看完就看。
ijse
2014 年 2 月 19 日
@coolicer ng-newsletter上的文章也都不错,推荐哦~~
JimmyChange
2014 年 2 月 19 日
expanderTitle是和你directive中的expander-title对应的,写成title:'@',应该算是语法糖

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://study.congcong.us/t/100905

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX