zoukankan      html  css  js  c++  java
  • 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工具书了。。

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

  • 相关阅读:
    React 之form表单、select、textarea、checkbox使用
    React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定
    React事件方法、React定义方法的几种方式、获取数据、改变数据、执行方法传值
    react综合案例-todolist、localstorage缓存数据
    【剑指offer15】二进制中1的个数(位运算),C++实现
    【剑指offer】10矩阵覆盖
    【剑指offer】09-3变态跳台阶
    【剑指offer】顺时针打印矩阵,C++实现
    【剑指offer】09-2跳台阶,C++实现
    leetcode1143
  • 原文地址:https://www.cnblogs.com/zhangdongming/p/5397295.html
Copyright © 2011-2022 走看看