用HTML包装指令

Question

我希望这会更直接，但我被困住了。我试图找出如何用HTML包装select而不破坏select本身。

据我所知，如果我制作一个名为'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 is here.