专栏首页angularejs学习篇angularjs学习第六天笔记(指令简介学习)
原创

angularjs学习第六天笔记(指令简介学习)

  您好,由于周末有事情,没哟学习angularjs,几天晚上开始继续学习angularjs,坚持加油每一天。谢谢

  接着上周五学习了表单验证以后,今天开始学习angularjs中一个非常重要的模块:指令

  今天主要先简单了解学习一下指令的一些基本概念后使用

一、指令的简介

    指令其实就是angularjs对html的一个扩展,实现自定义html元素

    angularjs其自身封装了一些常用的系统指令,我们也可以根据需要自定义指令

二、自定义指令简介

    自定义指令的基本格式

      app.directive("指令名称",function(){

        restrict: '指令匹配格式',      

        replace: true,是否自定义元素替代指令申明

        template: '<a href="http://www.baidu.com">百度一下马上达</a>' 

      });

    自定义指令关键词说明:

      指令名称说明:名字一般采用驼峰命名,及首字母小写其余单词大写

              在调用时,要将大写字母转换为小写并加上-

              举例:myDirectiveTest  调用为:my-directive-test

              备注:由于其内部指令是以ng开头,所以为了避免冲突,自定义指令名称不要以ng开头

      restrict有四种枚举值:

        E:指令按照元素来匹配

          使用:<my-directive-test></my-directive-test>

        C:按照class来匹配

          使用:<div class='my-directive-test'></div>

        A:按照属性来匹配

          使用:<div my-directive-test></div>

        M:按照注释来匹配

          <!--directive:my-directive-test-->

        虽然提供了四种匹配方式,但是考虑到浏览器的兼容性问题,尽可能按照属性来匹配:A

      一个简单的练习:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body ng-app="myApp">
    <my-directive-e></my-directive-e><br />
    <div my-directive-a></div><br />
    <p class="my-directive-c"></p><br />
</body>
</html>
<script src="Scripts/angular.js"></script>
<script type="text/javascript">
    var app = angular.module("myApp", []);
    app.directive("myDirectiveE", function () {
        return {
            restrict: "E",
            replace: true,
            template: "<a href='http://www.baidu.com'>百度一下马上达</a>"
        }
    });
    app.directive("myDirectiveA", function () {
        return {
            restrict: "A",
            replace: true,
            template: "<a href='http://www.baidu.com'>百度一下马上达</a>"
        }
    });
    app.directive("myDirectiveC", function () {
        return {
            restrict: "C",
            replace: true,
            template: "<a href='http://www.baidu.com'>百度一下马上达</a>"
        }
    });
</script>

三、指令中的数据传递

  指令中数据传递采用的方式也是数据绑定方式{{}}

  其实数据传递原理是:实现指令中的绑定是和html中属性想匹配

  其实现步骤:

    1、首先需要给指令创建一个隔离作用域

    2、定义与html中属性值匹配方式,有如下匹配方式:

      指令中的属性名称:"@html中的属性名称"

      指令中的属性名称:"@"  如果只有@那么html中的属性名称必定有指令中的属性名称完全一致

      指令中的属性名称:"=html中的属性名称" ,实现html和指令中的数据双向绑定

  @匹配方式简单练习

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body ng-app="myApp">
    <div my-directive-a my-valuess="点击我吧" url="http//:www.baidu.com"></div><br />
</body>
</html>
<script src="Scripts/angular.js"></script>
<script type="text/javascript">
    var app = angular.module("myApp", []);
    app.directive("myDirectiveA", function () {
        return {
            restrict: "A",
            replace: true,
            scope:{
                myValuess: "@",
                myLink:"@url"
            },
            template: "<a href='{{myLink}}'>{{myValuess}}</a>"
        }
    });
</script>

  通过=实现双向数据绑定练习:

<!DOCTYPE html>
<html lang="zh-CN" ng-app="app">
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="Scripts/angular.js"></script>
</head>
<body>
    <label>硬编码的input</label>
    <input type="text" ng-model="Url">
    <div my-directive some-attrs="Url"></div>

    <script src="../angular.min.js"></script>
    <script>
        angular.module('app', [])
        .directive('myDirective', function() {
            return {
                restrict: 'A',
                replace: true,
                scope: {
                    myUrl: '=someAttrs', // 等号用做 双向绑定 这里不做详细介绍
                },
                template: '<div>'+
                            '<label>指令中的input</label>'+
                            '<input type="text" ng-model="myUrl">'+
                            '<a href="{{ myUrl }}">点我试试</a>'+
                          '</div>'

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

今天就到此为止,明天继续研究表单验证,明天学习:angularjs内置指令

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • angularjs学习第六天笔记(指令简介学习)

      您好,由于周末有事情,没哟学习angularjs,几天晚上开始继续学习angularjs,坚持加油每一天。谢谢

    小小许
  • 聊聊多线程那一些事儿 之 五 async.await深度剖析聊聊多线程那一些事儿(task)之 三 异步取消和异步方法聊聊多线程那一些事儿 之 四 经典应用(取与舍、动态创建)

       hello task,咱们又见面啦!!是不是觉得很熟读的开场白,哈哈你哟这感觉那就对了,说明你已经阅读过了我总结的前面4篇关于task的文章,谢谢支持!感...

    小小许
  • 关于表单重复提交问题

    问题引入:当我们在做一个页面数据提交的时候,当我们连续点击提交按钮,因为快速连续点击,因为速度过快,页面还来不及反应,导致页面从复提交。。

    小小许
  • angularjs学习第六天笔记(指令简介学习)

      您好,由于周末有事情,没哟学习angularjs,几天晚上开始继续学习angularjs,坚持加油每一天。谢谢

    小小许
  • 【前端】:async、defer、onload、DOMContentLoaded

    The HTML <script> element is used to embed or reference executable code; this is...

    WEBJ2EE
  • 体验:Harness 持续交付即服务平台

    Harness CDaaS平台为应用程序交付提供了一种更加无缝的方法,该方法可以自动检测GitHub,Bamboo,Jenkins,Artifactory或Ne...

    泽阳
  • python3 使用flask_socketio实时推送服务器状态(top)和 日志信息(tail)

    使用python3和flask_socketio ,实现服务器上的tail和top命令的实时展示,将结果实时展示在web上

    用户1214487
  • 国内自主云计算服务器已具备国际竞争力

    2月11日上午10点,发展改革委高技术司副巡视员孙伟作客中国政府网,解读国务院办公厅日前印发的《关于促进云计算创新发展培育信息产业新业态的意见》。 孙伟表示,我...

    静一
  • Simditor富文本编辑器的调用

    简单、
  • 关于KVM GPU 直通

    zhengzongwei

扫码关注云+社区

领取腾讯云代金券