V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
coolicer
V2EX  ›  JavaScript

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

  •  
  •   coolicer · 2014-02-19 14:36:10 +08:00 · 3870 次点击
    这是一个创建于 3956 天前的主题,其中的信息可能已经有所发展或是发生改变。
    首先在书上的例子:
    <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复制过来,有点难看。
    8 条回复    1970-01-01 08:00:00 +08:00
    ijse
        1
    ijse  
       2014-02-19 14:44:08 +08:00   ❤️ 1
    不可以哦。。

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

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

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

    =和&都是支持任意类型的
    coolicer
        4
    coolicer  
    OP
       2014-02-19 16:25:38 +08:00
    @ijse AngularJS 中文名 《用AngularJS开发下一代web应用》
    ijse
        5
    ijse  
       2014-02-19 16:53:00 +08:00
    哦哦,, 推荐 《ng-book 》这本书,我觉得讲得更好一些。。
    coolicer
        6
    coolicer  
    OP
       2014-02-19 17:16:03 +08:00
    @ijse 已经下载了,这本看完就看。
    ijse
        7
    ijse  
       2014-02-19 18:48:08 +08:00
    @coolicer ng-newsletter上的文章也都不错,推荐哦~~
    JimmyChange
        8
    JimmyChange  
       2014-02-19 21:11:02 +08:00
    expanderTitle是和你directive中的expander-title对应的,写成title:'@',应该算是语法糖
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5320 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 08:11 · PVG 16:11 · LAX 00:11 · JFK 03:11
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.