陈志支
angularjs学习第六天笔记(指令简介学习)
来源:高卫疆     发布时间: 2019-04-23      浏览次数:324

字号:

  您好,由于周末有事情,没哟学习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

      restrict有四种枚举值:

        E:指令按照元素来匹配

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

        C:按照class来匹配

          使用:<div ></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内置指令

 

  • 相关内容: