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

                    
                
50000+
5万行代码练就真实本领
17年
创办于2008年老牌培训机构
1000+
合作企业
98%
就业率

联系我们

电话咨询

0532-85025005

扫码添加微信