перенос входных данных в директивы в angular

Вот что я считаю правильным способом сделать это. Как и в случае с OP, я хотел иметь возможность использовать директиву атрибута для обертки input. Но я также хотел, чтобы он работал с ng-if и т. д. без утечки каких-либо элементов. Как указал @jantimon, если вы не очистите свои элементы-оболочки, они останутся после того, как ng-if уничтожит исходный элемент.

app.directive("checkboxWrapper", [function() {
    return {
      restrict: "A",
      link: function(scope, element, attrs, ctrl, transclude) {
        var wrapper = angular.element('<div class="wrapper">This input is wrappered</div>');

        element.after(wrapper);
        wrapper.prepend(element);

        scope.$on("$destroy", function() {
          wrapper.after(element);
          wrapper.remove();
        });
      }
    };
  }
]);

И вот плункер, с которым можно поиграть.

ВАЖНО: scope vs element $destroy. Вы должны поместить свою очистку в scope.$on("$destroy"), а не в element.on("$destroy") (что я и пытался сделать изначально). Если вы сделаете это в последнем (элементе), тогда тег комментария «ngIf end» будет просочиться. Это связано с тем, как ngIf Angular очищает свой тег конечного комментария, когда выполняет свою ложную логику. Поместив код очистки вашей директивы в область $destroy, вы можете вернуть DOM, как это было до того, как вы обернули ввод, и поэтому код очистки ng-if доволен. К моменту вызова element.on("$destroy") в потоке ng-if falsey уже слишком поздно разворачивать исходный элемент, не вызывая утечки тега комментария.

Почему бы не сделать такую ​​директиву?

myApp.directive('wrapForm', function(){
    return {
        restrict: 'AC',
        link: function(scope, inputElement, attributes){                       
            var overallWrap = angular.element('<div />');
            var validation = angular.element('<div />').appendTo(overallWrap);
            var button = angular.element('<div />').appendTo(overallWrap);
            var inputWrap = angular.element('<div />').appendTo(overallWrap);

            overallWrap.insertBefore(inputElement);
            inputElement.appendTo(inputWrap);

            inputElement.on('keyup', function(){
                if (inputElement.val()) {
                    validation.text('Just empty fields are valid!');
                } else {
                    validation.text('');
                }
            });            
        }
    }
});

Скрипт: http://jsfiddle.net/bZ6WL/

По сути, вы берете исходное поле ввода (которое, кстати, также является директивой angularjs) и создайте оболочки отдельно. В этом примере я просто создаю DIV вручную. Для более сложных вещей вы также можете использовать шаблон, который получает $compile(d) с помощью angularjs.

Преимущество использования этого класса или html-атрибута «wrapForm»: вы можете использовать одну и ту же директиву для нескольких типов ввода формы.

Почему бы не обернуть ввод в функцию компиляции? Преимущество заключается в том, что вам не придется копировать атрибуты и не придется выполнять очистку в функции уничтожения области видимости. Обратите внимание, что вы должны удалить атрибут директивы, чтобы предотвратить циклическое выполнение.

(http://jsfiddle.net/oscott9/8er3fu0r/)

angular.module('directives').directive('wrappedWithDiv', [
    function() {
        var definition = {
            restrict: 'A',
            compile: function(element, attrs) {
                element.removeAttr("wrapped-with-div");
                element.replaceWith("<div style='border:2px solid blue'>" +
                    element[0].outerHTML + "</div>")
            }
        }
        return definition;
    }
]);

На основании этого: http://angular-tips.com/blog/2014/03/transclusion-and-scopes/

Эта директива выполняет включение, но включенный материал использует родительскую область, поэтому все привязки работают так, как если бы включенный контент находился в исходной области, в которой используется оболочка. Это, конечно, включает ng-модель, а также min/max и другие директивы/атрибуты проверки. Должно работать для любого контента. Я не использую директиву ng-transclude, потому что я вручную клонирую элементы и предоставляю им родительскую (контроллерную) область. «my-transclude» используется вместо ng-transclude, чтобы указать, куда вставить включенный контент.

Жаль, что ng-transclude не имеет настройки для управления областью действия. Это сделало бы всю эту неуклюжесть ненужной. И похоже, они это не исправят: https://github.com/angular/angular.js/issues/5489

    controlsModule.directive('myWrapper', function () {
        return {
            restrict: 'E',
            transclude: true,
            scope: {
                label: '@',
                labelClass: '@',
                hint: '@'
            },

            link: link,
            template:
                '<div class="form-group" title="{{hint}}"> \
                    <label class="{{labelClass}} control-label">{{label}}</label> \
                    <my-transclude></my-transclude> \
                 </div>'
        };

        function link(scope, iElement, iAttrs, ctrl, transclude) {

            transclude(scope.$parent,
                function (clone, scope) {

                    iElement.find("my-transclude").replaceWith(clone);

                    scope.$on("$destroy", function () {
                        clone.remove();
                    });
                });
        }
    });