• AngularJS学习笔记(四) 自定义指令


    指令(directive)是啥?简单来说就是实现一定功能的XXX。。。之前一直用的ng-model,ng-click等等都是指令。当我有一个ng没提供的需求的时候,就可以自定义个指令。指令的好处显而易见,方便复用。

    本文会以一个检查用户名是否重复的指令为例,说明自定义指令怎么写。这个指令是我琢磨着写的,只是一个例子,知识点不全是一定的,不过能用,嗯。。不过如果代码哪里写的有问题请指出。

    先看代码

    <button my-check>注册</button>

    当然,这是属性风格的指令,还可以有标签风格,class,注释。。。

    m1.directive("myCheck",["$rootScope",function($rootScope){
           return{
               restrict : 'A',
               link:function(scope,element){
                   element[0].onclick=function(){
                var data=$rootScope.info;
                var name=scope.regText.name;
                var pw=scope.regPassword.name;
                       console.log(name,pw);
                if(name&&pw){
                    for(var i=0;i<data.length;i++){
                        if(data[i].name===name){
                            scope.state="用户名已经被占用";
                            return;
                        }
                    }
                    scope.state="注册成功";
                    data.push({"name":name,"password":pw});
                    console.log(data);
                }
                   }
            }
        }

    首先,directive方法的第一个参数是指令名,不过指令名有一点奇怪的就是在html和js中,写法是不一样的,这是比较令我困惑的地方。

    然后第二个参数数组还是常见的依赖注入写法(这里我注入$rootScope的原因是用户信息都挂在$rootScope的一个属性上),然后直接return一个对象。

    对象属性:restrict:“A”代表这个指令是个属性风格的指令

                  link:写一个函数,函数里是这个指令的逻辑。

    值得提到的是,link函数的参数,它的参数有三个(我只用到了2个)

    第一个是scope作用域,这个作用域默认是标签的父级作用域,就是标签在那个作用域下,scope就是那个$scope。当然你可以改作用域,这个以后再说。。

    第二个存着DOM元素,比较诡异的是它是一个数组,并不是DOM本身,而是这个对象的第一个元素就是这个DOM对象

    第三个属性我输出了下,我把对象输出了下。。

    内容倒是挺熟,不过这个属性本身存在的意义是啥?又为啥要写成这样,再留个坑。。看来需要买本ng工具书了。。

    下一节没想好写什么,拟定是看看服务方面有没有可写的。

  • 相关阅读:
    矢量瓦片切割工具,注意不是切图工具哦
    openlayers模仿google地图--地图版权随鹰眼关闭打开而改变位置
    centos建立本地yum源shell脚本
    python通用序列操作
    awk手册
    linux启动级别简单说明
    win8程序开机自启动管理
    linux系统监控shell脚本
    shell脚本实现源码lamp自动化安装
    python实现冒泡排序
  • 原文地址:https://www.cnblogs.com/zhangdongming/p/5397295.html
Copyright © 2020-2023  润新知