在AngularJs指令中，我可以使用transclude追加html

Question

我想使用指令转换此

<div x-my-input>
    <input type="text" class="form-control" name="foobar" data-ng-model="foobar">
</div>

到这个

<div x-my-input class="input-group">
    <input type="text" class="form-control" name="foobar" data-ng-model="foobar">
    <span class="input-group-addon blur-icon">
        <span class="glyphicons glyphicons-keyboard-wireless"></span>
    </span>
</div>

我还想添加模糊和焦点触发器。这就是我现在所拥有的。

.directive("myInput", function() {
    return {
        restrict: "EAC",
        replace: true,
        transclude: true,
        scope: true,
        template: '<div class="input-group">' +
            '<ng-transclude></ng-transclude>' +
            '<span class="input-group-addon blur-icon">' +
            '<span class="js-hide-icon glyphicons-top glyphicons glyphicons-keyboard-wireless"></span>' +
            '</span>',
            '</div>',
        link: function(scope, element, attrs, ctrl, $timeout) {
            $timeout(function() {
                var $inputElement = element.find('input').first();
                $inputElement.focus(function() {
                    $(".form-submit, .nav-bar").fadeOut(150);
                }).blur(function() {
                    $(".form-submit, .nav-bar").fadeIn(150);
                });
            });
        }
    };
})

功能上它可以工作，但它创建的html就是这个

<div class="input-group ng-scope" x-my-input="">
    <ng-transclude>
        <input type="text" class="form-control" name="foobar" data-ng-model="foobar">
    </ng-transclude>
    <span class="input-group-addon blur-icon">
        <span class="glyphicons glyphicons-keyboard-wireless"></span>
    </span>
</div>

如何将输入包含在 div 中，并在 div span > 输入后？