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

2014-02-19 14:36:10 +08:00
 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复制过来,有点难看。
3854 次点击
所在节点    JavaScript
8 条回复
ijse
2014-02-19 14:44:08 +08:00
不可以哦。。

@ 是字符绑定
= 是双向绑定
& 是单向绑定
coolicer
2014-02-19 14:54:26 +08:00
@ijse 你的解析怎么跟书上不一样,书上说

@ 传递字符
= 把父scope属性导入到子scope
& 引入父scope的一个函数
ijse
2014-02-19 15:50:08 +08:00
@coolicer 你在看哪本书?

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

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

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

https://www.v2ex.com/t/100905

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

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

© 2021 V2EX