如何将指令模板的属性附加到AngularJS中父元素以外的其他元素？

Question

I'd like to implement a directive that converts <specialInput></specialInput> into something like

<div id="myDiv">
    <label></label>
    <input></input>
</div>

However, all attributes that the user provides by putting them into the specialInput -tag like <specialInput id="test" class="test2" ... required></specialInput> are currently attached to the div element myDiv. Rather than that, I would like to attach all attributes to the input -tag.

Note: One solution would be manually attaching every possible attribute to the label tag by adding the variable (eg type="' + atts.type + '" ) to the template and then remove these attributes from the parent by using the linkfunction. This is not what I want to achieve though. There are way too many possible attributes to consider this solution.

 // special-input Angular (function () { 'use strict'; function specialInputDirective($compile) { function templateFunction(element, attrs) { var template = [ '<div class="control-group">'+ '<label for="' + attrs.name + '" class="control-label">' + attrs.label + '</label>' + ' <div class="controls">' + ' <input id="' + attrs.id + '" type="' + attrs.type + '" ' + ' ng-model="' + attrs.name + '" ' + (attrs.ngTrueValue ? 'ng-true-value="' + attrs.ngTrueValue + '" ' : '') + (attrs.ngFalseValue ? 'ng-false-value="' + attrs.ngFalseValue + '"' : '') + ' " placeholder="' + attrs.placeholder + '"' + ' ' + attrs.required + ' ' + attrs.disabled + ' ' + attrs.readonly + ' name="' + attrs.name + '"' + ' required>' + ' </div>' + '</div>' ].join(''); return template; } return { link: linkFunction, restrict: 'E', replace: true, transclude: true, template: templateFunction }; ////////// function linkFunction(scope, inputElement, attrs, ctrl, transcludeFn) { // Removes user defined attributes from 'control-group'. // These are added to the <input> element instead (Defined in: Template) // BUT: there are many, many more attributes than this! So this is not the solution I'm aiming for. inputElement.removeAttr('id'); inputElement.removeAttr('type'); inputElement.removeAttr('label'); inputElement.removeAttr('placeholder'); inputElement.removeAttr('required'); inputElement.removeAttr('disabled'); inputElement.removeAttr('readonly'); inputElement.removeAttr('name'); } } ////////// function initModule(angular) { ... } }()); 

 <form name="myForm" class="form-horizontal" style="max-width: 700px;"> <h4>Horizontal Label</h4> <special-input name="myName" type="email" label="Email" placeholder="Email"></special-input> <special-validation for="myForm.myName" message="required" type="error">This message box represents an error</special-validation> <special-validation for="myForm.myName" message="minlength" type="warning">This message box represents a warning</special-validation> <special-validation for="myForm.myName" message="maxlength">This message box represents an error</special-validation> <special-validation for="myForm.myName" message="email">Invalid email address</special-validation> <special-input type="text" label="Text" placeholder="Required input" name="myName2" ng-minlength="5" ng-maxlength="20" required></special-input> <special-input type="password" label="Password" placeholder="Password"></special-input> </form> 

Answer 1

You definitely don't want to create binding in scope for each attribute. Instead, the simplest and probably the most effective way to solve it, is to find an input element and then copy all attributes to it in compile function.

Here is simplified version of your directive:

.directive('specialInput', function() {

    function linkFunction(scope, element, attrs) {
        // Do something else, bind events, etc ...
    }

    return {
        transclude: true,
        template: function(element, attrs) {
            return '' +
            '<div class="control-group">' +
            '    <label for="' + attrs.name + '">' + attrs.label + '</label>' +
            '    <input>' +
            '</div>';
        },
        compile: function(element, attrs) {

            var input = element.find('input');

            // Copy attrbutes
            angular.forEach(attrs.$attr, function(val, key) {
                input.attr(val, attrs[key]);
            });

            element.replaceWith(element.children()[0]);

            return linkFunction;
        }
    };
});

Demo: http://plnkr.co/edit/sQRFzDN0nZJBinu8atOH?p=preview

Answer 2

You have to use the compile feature of the directive to achieve what you want.

As long as you only want to move PLAIN ATTRIBUTES from parent element to inner, you are basically ok. If you want to move DIRECTIVES attributes from parent to children, this is way more complicated.

The example the for first option ( only plain/html attribute, not moving stuff that will need to be compiled/linked on the child element ) would be :

/**
 * Input wrapper directive, used to copy all attributes to the underneath input element.
 *
 * To keep a property on the wrapper, prefix it with "wrapper-*"
 * In example, "wrapper-class" will create the "class" property on the wrapper, where "class" will be copied to the input.
 */
module.directive("tlInputWrapper", function($compile) {
    // TODO : keep ngShow, ngIf... and other logic directive on the wrapper.
    return {
        restrict : "A",
        compile  : function($el, $attrs) {

            var input = $el.find("input"); // here, you find the child element you wanna move attributes to

            $attrs.$set("tlInputWrapper", null);
            var attributesToKeep = {};

            _.each($attrs.$attr, function(domAttributeName, normalizedAttributeName) {
                if(domAttributeName.indexOf("wrapper-") === 0) { // I allow keeping attributes on the wrapper. Ex : 'wrapper-class' will stay on the wrapper and be renamed 'class'
                    attributesToKeep[domAttributeName.substring(8)] = $attrs[normalizedAttributeName];
                    $attrs.$set(normalizedAttributeName, null);
                } else {
                    input.attr(domAttributeName, $attrs[normalizedAttributeName]);
                    $attrs.$set(normalizedAttributeName, null);
                }
            });

            _.each(attributesToKeep, function(attrValue, attrName) {
                $attrs.$set(attrName, attrValue);
            });

            return angular.noop;
        }
    };
});