美文网首页Angular.js专场
angular笔记三

angular笔记三

作者: AlanV | 来源:发表于2017-06-11 14:12 被阅读51次

    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>

    相关文章

      网友评论

        本文标题：angular笔记三

        本文链接：https://www.haomeiwen.com/subject/oxphqxtx.html

        延伸阅读

        深度阅读

        • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

        栏目导航

        热点阅读

        Angular.js专场

        关于我们|服务条款|联系我们|angular笔记三|投稿指南|网站地图|RSS订阅|排版工具|手机版

        提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

        Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

        备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

        本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

        所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！