angular笔记三

angular第三天

1.自定义指令

官方都是以ng-开头的指令，而angular内部可以通过自定义指令来创建属于你自己的指令

1.1模版

• template用于简单模版书写

• ng-transclude属性，覆盖标签内容，缺陷：只能重复一段代码，也是外部将内容传递进来；transclude用替换当前标签中的innerHtml

    
    
    
    


    
这是第一个
    
这是第二个
    
这是第三个
    
    

• scope灵活的创建模版，赋值灵活

• 封装bootstrap

2. 如果外部有需要传递内容进来需要在scope中添加对应的属性
3. scope有三中参数 true、{}、false不会创建独立作用域
4. （true和{}）用来创建独立作用于域 ，区别true还会附带继承父作用域，{}不会继承
5. false不会创建独立作用域, 在属性中scope以对象的形式出现

./mypaneltemplate.html文件



    

        
{{titlea}}
    
    

        

    





    


    
    
    



    

        

            从外部传递过来的1
        

        

            从外部传递过来的2
        


    

• 作用域问题

    


    
    



    

        {{text}}
    
    

作用域问题2

外部mypaneltemplate2.html文件


    

        
title
    
    

        
panel-body
    


    


    
    
    

• link 的用法

    


    
    
    


    

        
{{test}}
    

• 过滤器

    


    
    




{{1000.126|number:2}}

{{'HELLO'|lowercase}}
{{'lowercase'|uppercase}}


{{[1,2,3,4,5,6,7]|limitTo:3:2}}

{{ {
    "id":"1220562",
    "alt":"https:\/\/book.douban.com\/book\/1220562",
    "rating":{"max":10, "average":"7.0", "numRaters":282, "min":0},
    "author":[{"name":"片山恭一"}, {"name":"豫人"}],
    "alt_title":"",
    "image":"https://img3.doubanio.com\/spic\/s1747553.jpg",
    "title":"满月之夜白鲸现",
    "mobile_link":"https:\/\/m.douban.com\/book\/subject\/1220562\/",
    "summary":"那一年，是听莫扎特、钓鲈鱼和家庭破裂的一年。说到家庭破裂，母亲怪自己当初没有找到好男人，父亲则认为当时是被狐狸精迷住了眼，失常的是母亲，但出问题的是父亲……。",
    "attrs":{
       "publisher":["青岛出版社"],
        "pubdate":["2005-01-01"],
        "author":["片山恭一", "豫人"],
        "price":["18.00元"],
        "title":["满月之夜白鲸现"],
        "binding":["平装(无盘)"],
        "translator":["豫人"],
        "pages":["180"]
    },
    "tags":[
        {"count":106, "name":"片山恭一"},
        {"count":50, "name":"日本"},
        {"count":42, "name":"日本文学"},
        {"count":30, "name":"满月之夜白鲸现"},
        {"count":28, "name":"小说"},
        {"count":10, "name":"爱情"},
        {"count":7, "name":"純愛"},
        {"count":6, "name":"外国文学"}
    ]
} | json:5}}

{{1497080646471|date:'yyyy-MM-dd HH:mm:ss Z'}}

没有过滤器{{1000}}
金钱过滤器:{{1000|currency}}
金钱过滤器:{{1000|currency:'￥':5}}

• filter过滤器

    
    


    

        

            
            

                
                

                     name:{{use.name}}
                     phone:{{use.phone}}
                
            
        
    

• orderBy

    


    
    


    

        

            
           phone的排序 
            

                

                     name:{{use.name}}
                     phone:{{use.phone}}