angularJs指令开发：给指令内的html元素起别名

在使用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 refs = ($(element).find("[ref]"));
    var result = {};
    for (var i = 0; i < refs.length; i++) {
        var item = $(refs[i]);
        var refName = item.attr('ref');
        if (!(refName in result)) result[refName] = [];
        result[refName].push(item[0]);
    }
    for (var key in result) {
        if (result[key].length == 1) result[key] = result[key][0];
    }
    return 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 refs = getRefs($element);
                for(var key in refs){
                    var k = refs[key];
                    console.log();
                    if (!('length' in k)){
                        console.log(k.value);
                    }else {
                       for(var i=0;i<k.length;i++){
                           console.log(k[i].value);
                       }
                    }
                    console.log('--------');
                }
            }
        ]
    }
});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!