angualrJs指令起名的bug

Posted 2020-09-07 mtant

我在写一个demo时：

<div ng-repeat="user in users" my-template2 my-template>  //my-template2 和my-template 是我写的两个指令，注意我起的指令名

然后在实际使用中：

.directive("myTemplate",function () {
    return{
        restrict : "EACM",
        replace : true,
        compile : function (tElement, tAttrs, translude) { 
            console.log("1 正在编译！");                               // 总是 先 指令 myTemplate 编译， 然后 myTemplate2在编译
            tElement.append(angular.element("<div>aaaa1</div>"));     //tip : 这里会触发，但是页面上却没有。
            return function () {
                console.log("1 的 compile 下的 postLink 已执行!");
            }
        }
    }
})
.directive("myTemplate2",function () {
    return{
        restrict : "EACM",
        template:‘<div>{{user.name}}</div>‘,
        compile : function (tElement, tAttrs, translude) {
            tElement.append(angular.element("<div>aaaa2</div>"));
            console.log("2 正在编译！");

            return {
                pre : function preLink() {
                    console.log("2 preLink 函数");
                },
                post: function postLink() {
                    console.log("2 postLink函数");
                }
            };
        },
        link : function () {

        }
    }
})
/**
结论： 如果你的起名类似 xx 和 xx + “其他的字符串”（比如： demoDer 和 demoDersss） ，且他们作用在同一个元素上时， 优先级相同时， xx 总是会先编译（也许是他短-->我很短，但是我可以旋转）,且对他的dom调整会失效。
当你换了一个名字的时候比如demoDer1 和 demoDers 时， 就会恢复正常。
这是我发现的一个现象 我的angualr版本是 :

v1.2.16
听说angualr 已经4.00 不知道新的版本还有这个问题吗? 有待测试。

*/