用HTML包装指令

Question

我本希望这会更直接，但我被卡住了。我正试图弄清楚如何在不破坏选择本身的情况下用HTML包装选择。

据我所知，如果我生成一个名为"select"的指令，当我在HTML中添加一个select时，它就会触发。除非我没有正确理解，否则共谋是正确的方法。

因此，我设置了一个足够简单的指令，只是在select周围添加HTML，但它什么都不做。如果我同时添加transclude: true和replace: true，它在排序上是有效的，尽管它会获取select的属性并将其移动到我的模板div中

我认为plnkr是共享此代码的最简单方法。我也应该在这里打出来吗？http://plnkr.co/edit/MhADL7dKFRV7neCHPxeP?p=preview

Answer 1

如果您不需要编写模板HTML，只想围绕select元素调整DOM，那么最简单的包装指令的方法之一就是这样。

.directive('select', function(){
    return {
        restrict: 'E',
        link: function(scope, element){
            // adjust element as you want
            //element.addClass('prettySelect');
            element.wrap('<div class="prettySelect"></div>');
        }
    }
});

jsfiddle来了。