在使用VUE的时候，自定义组件可以对组件内的html元素起别名，然后通过this.$refs.别名获取这个dom元素对象，而且和这个获取的方式是作用域内的，不会获取到外部作用域别名同名的元素，这是一个非常实用的功能，但是在angularJs中是没有的，在自定义自定的时候，要获取指令内元素dom对象，可以通过设置id，或者name或者其他属性值来获取，但是这样做的方式使得程序的兼容性不好，id只能用一个，name之类的已有的属性直接用也不太合适，最好的办法是自定义一个属性(ref)，然后通过这个属性获取所有拥有别名的dong元素。

本次总结所使用的环境：jquery、angularJs；

主要代码：

/* * 在指令中，获取作用域范围内的所有用了ref属性标记的节点，如果ref值相同，通过 getRefs(element).别名 结果是一个数组，如果ref值只有一个，测获取的就是一个对象 * element：在指令中，$element对象，也就是指令本身对象 */ function getRefs(element) {
    var @H_404_91@refs = ($(element).find("[ref]"));
    var @H_404_91@result = {};
    for (var @H_404_91@i = 0; @H_404_91@i < @H_404_91@refs.length; @H_404_91@i++) {
        var @H_404_91@item = $(@H_404_91@refs[@H_404_91@i]);
        var @H_404_91@refName = @H_404_91@item.attr('ref');
        if (!(@H_404_91@refName in @H_404_91@result)) @H_404_91@result[@H_404_91@refName] = [];
        @H_404_91@result[@H_404_91@refName].push(@H_404_91@item[0]);
    }
    for (var @H_404_91@key in @H_404_91@result) {
        if (@H_404_91@result[@H_404_91@key].length == 1) @H_404_91@result[@H_404_91@key] = @H_404_91@result[@H_404_91@key][0];
    }
    return @H_404_91@result;
}

这个函数只有一个参数，指令的dom元素对象element，了解过自定义指令的同学应该知道，在自定义指令的controller或者link函数和compile函数中都可以得到一个$element，就是传入这个element就行了；通过这个指令中的dom元素，会查找这个元素下所有拥有ref属性的元素，然后别名为key，dom元素为value封装到结果中，最后这个函数返回这个结果，如果有多个同别名的元素，值就是一个数组，单个的话就是就是一个对象。

看一下测试指令代码：

<div>
    <input type="text" value="111" ref="i1"/>
    <input type="text" value="222" ref="i1"/>
    <input type="text" value="3333" ref="i2"/>
    <input type="text" value="4444" ref="i2"/>
    <input type="text" value="555" ref="i3"/>
    <input type="text" value="666" ref="i3"/>
    <input type="text" value="777" ref="i3"/>
    <input type="text" value="8888" ref="i4"/>
</div>

app.directive('test',function () {
    return {
        restrict: 'E',        replace: true,        templateUrl: 'js/directives/test/test.template.html',        scope: {
        },        controller: [
            '$scope','$element','$attrs','$transclude',            function ($scope,$element,$attrs,$transclude) {
                var @H_404_91@refs = getRefs($element);
                for(var @H_404_91@key in @H_404_91@refs){
                    var @H_404_91@k = @H_404_91@refs[@H_404_91@key];
                    console.log();
                    if (!('length' in @H_404_91@k)){
                        console.log(@H_404_91@k.value);
                    }else {
                       for(var @H_404_91@i=0;@H_404_91@i<@H_404_91@k.length;@H_404_91@i++){
                           console.log(@H_404_91@k[@H_404_91@i].value);
                       }
                    }
                    console.log('--------');
                }
            }
        ]
    }
});