那些年，angular里的jqLite使用过程中踩的小坑

标签（空格分隔）： ng  jqLite

---

tip：本文ng版本：1.6.3
1.查找某个dom元素的子级元素只能使用find('子级tagName')；使用children（''）;括号里不管传递什么参数都会把所有子级选中。下边是封装的一个nav指令。link里事实现的是讲标签身上的nav属性即定义的nav指令的值放在子级span标签里。

html：
  <div nav="今日一刻" ></div>
js:
angular.module('app')
.directive('nav',function () {    return{
        restrict:"A",
        templateUrl:'../view/tpl/nav_tpl.html',
        replace:true,
        link:function ($scope,$jqLite,$attrs) {            // console.log($jqLite);就是指代的是nav元素
            // $jqLite.children('span').html($attrs.nav);
             $jqLite.find('span').html($attrs.nav);
          
            }
        }
    }
});
![Uploading Paste_Image_395212.png . . .]

2.在标签身上自定义属性的时候的，命名不能出现大写，就算写了最后都会转成小写形式，所以在做逻辑处理取值时会出现小偏差。这里要实现的是在首页时导航发的返回按钮隐藏类似ng里的ng-show,ng-hide,但是这里是要在父级标签身上放一个标志位，处理子级的i标签的显示隐藏，所以自己封一个小逻辑。

html：注意isHidden写法
            <div nav="今日一刻" isHidden="true"></div>
            <div nav="今日一刻" ishidden="true"></div>
 对应的打印结果：     
            //console.log($attrs.isHidden);undefined
            //console.log($attrs.ishidden);'true'js:
           link:function ($scope,$jqLite,$attrs) {
           console.log($attrs.ishidden);            if($attrs.ishidden==='true'){
                $jqLite.find('i').css({display:'none'})
            }


        }

3:指令名字中采用驼峰命名时，在标签身上体现时不能使用驼峰，而是把驼峰处替换成中划线。代码中加了**处注意。

html:<div **list-view**></div>js:
angular.module('app')
.directive('**listView**',function () {    return{        restrict:"A",        templateUrl:'../view/tpl/list_tpl.html',        replace:true
    }
});

后续待更新，有时间在搞。

----------------------------------------------------喜欢就动动小手哈。------------------------------------------------------

--------------------------------------你的支持是洒家-麦壳-macrolam前进的动力---------------------

作者：麦壳儿UIandFE2
链接：https://www.jianshu.com/p/8768b8dd5ca0