angular笔记三

angular第三天

1.自定义指令

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

1.1模版

  • template用于简单模版书写
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body ng-app="myApp">
        <!--标签格式-->
        <my-dir></my-dir>
        <!--属性格式-->
        <div my-dir></div>
        <!--类名格式-->
        <div class="myDir"></div>
        <!--注释格式，注意注释格式必须配合replace：true一起使用，书写的时候左右两边都要加空格-->
        <!-- directive:my-dir -->
        <!--引入angular包-->
    <script src="../第一天/angular-1.5.8/angular.js"></script>
    <script>
        // angular的监听范围
        var app=angular.module('myApp',[]);
        // 自定义指令directive,这个指令的第一个参数是名字,驼峰命名,第二个为函数
        app.directive('myDir',function(){
            return{
                //书写模版
                template:"<h1>哈哈哈哈</h1>",
                //去壳，即去掉<my-dir></my-dir>
                replace:true,
                //这里是格式的权限，决定了可以用哪些格式书写模版，A：attribute(属性),E:element(元素),C:class(类名),M:common(注释)
                restrict:'AECM'
            }
        });
    </script>
</body>
</html>
  • ng-transclude属性，覆盖标签内容，缺陷：只能重复一段代码，也是外部将内容传递进来；transclude用替换当前标签中的innerHtml
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body ng-app="myApp">
    <div my-dir>这是第一个</div>
    <div my-dir>这是第二个</div>
    <div my-dir>这是第三个</div>
    <script src="../第一天/angular-1.5.8/angular.js"></script>
    <script>
        var app=angular.module('myApp',[]);
        app.directive('myDir',function(){
            return{
                //transclude用替换当前标签中的innerHtml
                //这个ng-transclude属性,是复制代码，但是有缺陷就是只能很死的复制同一段代码，在使用时，必须加transclude；
                template:'<div><h1 ng-transclude>这是H1</h1><h2 ng-transclude>这是H2</h2><h3 ng-transclude>这是H2</h3></div>',
                transclude:true
            }
        });
    </script>
</body>
</html>
  • scope灵活的创建模版，赋值灵活
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body ng-app="myApp" ng-controller="myCtrl" >
    <my-dir text1="555" text="666" text3='text4' fun='fun()'></my-dir>
    <script src="../第一天/angular-1.5.8/angular.js"></script>
    <script>
        var app=angular.module('myApp',[]);
        app.directive('myDir',function(){
            return{

                template:'<button ng-click="tet()">点击</button><div><h1>{{text1}}</h1><h2>{{text2}}</h2><h3>{{text3}}</h3></div>',
                scope:{
                    text1:'@',
                    text2:'@text',
                    text3:'=text3',
                    tet:'&fun'
                }
            }
        });
        app.controller('myCtrl',function($scope){
            $scope.text4="这个来自控制器的文字";
            $scope.fun=function(){
                console.log("这个是从controller出来的");
            }
        });
        //这道题真的真的好玩，来来分析，@表示字符串，然后只有单个的时候，text1:'@'===text1：'@text1';
        //text1表示属性，然后@text1表示值，然后text1传递内容书写入表达式，拿进来的是@text1（value值）
        //@:传递的是字符串，=：传递的是变量，&：传递的是函数
    </script>
</body>
</html>
  • 封装bootstrap
  1. 如果外部有需要传递内容进来需要在scope中添加对应的属性
  2. scope有三中参数 true、{}、false不会创建独立作用域
  3. （true和{}）用来创建独立作用于域 ，区别true还会附带继承父作用域，{}不会继承
  4. false不会创建独立作用域, 在属性中scope以对象的形式出现
./mypaneltemplate.html文件


<div class="panel" ng-class="{'panel-primary':type=='primary','panel-success':type=='success'}">
    <div class="panel-heading">
        <h3 class="panel-title">{{titlea}}</h3>
    </div>
    <div class="panel-body">
        <div  ng-transclude></div>
    </div>
</div>




    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap/dist/css/bootstrap.css">

</head>
<body>
    <div ng-app="myApp" class="row">
        <div  class="col-md-3">
            <my-panel title2='标题一' body='内容一' type='success' >从外部传递过来的1</my-panel>
        </div>

        <div  class="col-md-3">
            <my-panel  title2='标题2' body='内容二' type='primary' >从外部传递过来的2</my-panel>
        </div>


    </div>

<script src="js/angular.js"></script>
<!--template模板,通过text/ng-template将当前的script变成一个模板-->
<script id="mypaneltemplate" type="text/ng-template">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">Panel title</h3>
        </div>
        <div class="panel-body">
            Panel content
        </div>
    </div>
</script>
<script>
    var  app=angular.module('myApp',[]);
    //以bootstrap来定义的panel
    app.directive('myPanel',function () {
        return {
            //templateUrl 放模板的id/路径
            templateUrl:'./mypaneltemplate.html',
            //$scope.title
            scope:{
                titlea:'@title2',
                body:'@',
                type:'@'
            },
            transclude:true
        }
    })
</script>
</body>
</html>
  • 作用域问题
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body ng-app="myApp" >
<div ng-controller="myCtrl">
    <div ng-controller="myCtrl2">
        {{text}}
    </div>
    <my-dir text='123' ></my-dir>
</div>

<script src="js/angular.js"></script>
<script>
    var app=angular.module('myApp',[]);
    app.directive('myDir',function () {
        return {
            template:'<div>{{text}}</div>',
            // {}也会增加作用域，此时这个作用于不会找父类中的引用参数 true 会增加属于自己的作用域scope false
            scope:{
                text:'@text'
            }
        }
    })
    app.controller('myCtrl',function ($scope) {
        $scope.text='这是ctrl中传递过来的内容'
    })
    app.controller('myCtrl2',function ($scope) {

    })
</script>
</body>
</html>

作用域问题2

外部mypaneltemplate2.html文件

<div class="panel panel-primary" ng-init="isShow='true'"  >
    <div class="panel-heading"    ng-click="isShow=!isShow">
        <h3 class="panel-title">title</h3>
    </div>
    <div class="panel-body" ng-show="isShow">
        <div  >panel-body</div>
    </div>
</div>

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./bootstrap/dist/css/bootstrap.css">
</head>
<body ng-app="myApp" >
<my-dir class="col-md-3"></my-dir>
<my-dir class="col-md-3"></my-dir>
<my-dir class="col-md-3"></my-dir>
<script src="js/angular.js"></script>
<script>
    var app=angular.module('myApp',[]);
    app.directive('myDir',function () {
        return {
            templateUrl:'mypaneltemplate2.html',
            scope:{}
        }
    });
    app.controller('myCtrl',function ($scope) {

    })
</script>
</body>
</html>
  • link 的用法
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .red{
            background-color: red;
        }
    </style>
</head>
<body ng-app="myApp">
    <div ng-controller=" myCtrl" my-link class="red">
        <h1>{{test}}</h1>
    </div>
<script src="js/angular.js"></script>
<script>
    var app=angular.module('myApp',[]);
    app.directive('myLink',function () {
        //angular中不鼓励在除了link之外的地方操作dom元素
        //link 用来在angular中操作dom
        return {
            link:function (scope,ele,atts) {
                //scope 能够访问到当前的作用域
               // console.log(scope);
                //ele 获取到当前自定义指令中的jqLite对象
               // console.log(ele[0]);
                console.log(atts);
            }
        }
    })
    app.controller('myCtrl',function ($scope) {
        //console.log($scope);
        $scope.test='test';
    })
</script>
</body>
</html>
  • 过滤器
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body ng-app>
<!--number过滤器-->
<p>{{1000.126|number:2}}</p>
<!--lowercase& uppercase-->
<p>{{'HELLO'|lowercase}}</p>
<p>{{'lowercase'|uppercase}}</p>
<!--limitTo-->
<!--3表示显示个数，2表示起始位置-->
<p>{{[1,2,3,4,5,6,7]|limitTo:3:2}}</p>
<!--json过滤器-->
<pre>{{ {
    "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}}</pre>
<!--时间过滤器-->
<p>{{1497080646471|date:'yyyy-MM-dd HH:mm:ss Z'}}</p>
<!--金钱过滤器-->
<p>没有过滤器{{1000}}</p>
<p>金钱过滤器:{{1000|currency}}</p>
<p>金钱过滤器:{{1000|currency:'￥':5}}</p>
<script src="js/angular.js"></script>
<script src="js/angular-locale_zh-cn.js"></script>
<script>

</script>
</body>
</html>
  • filter过滤器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body >
    <div ng-app="myApp">
        <div ng-controller="myCtrl">
            <input type="text" ng-model="search" >
            <ul>
                <!--filter过滤器用来数组或者是对象 用在repeate中-->
                <li ng-repeat="use in list | filter:{name:search}">
                     <span>name:{{use.name}}</span>
                     <span>phone:{{use.phone}}</span>
                </li>
            </ul>
        </div>
    </div>
<script src="js/angular.js"></script>
<script>
    var app=angular.module('myApp',[]);
    app.controller('myCtrl',function ($scope) {
        $scope.search=''
        $scope.list=[
            {name:'John', phone:'555-1276'},
            {name:'Mary', phone:'800-BIG-MARYJ'},
            {name:'Mike', phone:'555-4321'},
            {name:'Adam', phone:'555-5678'},
            {name:'Julie', phone:'555-8765'},
            {name:'Juliette', phone:'555-5678'}]
    })
</script>
</body>
</html>
  • orderBy
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body >
    <div ng-app="myApp">
        <div ng-controller="myCtrl">
            <input type="text" ng-model="search" >
           phone的排序 <input type="checkbox" ng-model="orderByPhone">
            <ul>
                <li ng-repeat="use in list |orderBy:'phone':orderByPhone">
                     <span>name:{{use.name}}</span>
                     <span>phone:{{use.phone}}</span>
                </li>
            </ul>
        </div>
    </div>
<script src="js/angular.js"></script>
<script>
    var app=angular.module('myApp',[]);
    app.controller('myCtrl',function ($scope) {
        $scope.search='';
        $scope.orderByPhone=true
        $scope.list=[
            {name:'John', phone:'555-1276'},
            {name:'Mary', phone:'800-BIG-MARYJ'},
            {name:'Mike', phone:'555-4321'},
            {name:'Adam', phone:'555-5678'},
            {name:'Julie', phone:'555-8765'},
            {name:'Juliette', phone:'555-5678'}]
    })
</script>
</body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 194,319评论 5赞 459
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,801评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,567评论 0赞 319
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,156评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 61,019评论 4赞 355
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,090评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,500评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,192评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,474评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,566评论 2赞 309
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,338评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,212评论 3赞 312
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,572评论 3赞 298
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,890评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,169评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,478评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,661评论 2赞 335

推荐阅读更多精彩内容