首页 > > 网页制作 > Javascript >

angularjs学习第六天笔记（指令简介学习）

2018-09-01 05:48:50来源：博客园阅读 ()

　　您好，由于周末有事情，没哟学习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：按照注释来匹配

　　　　　　　　虽然提供了四种匹配方式，但是考虑到浏览器的兼容性问题，尽可能按照属性来匹配：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>