Легкий способ передачи атрибутов пользовательских директив дочернему элементу?

Question

Я создаю директиву, которая в основном используется в качестве <input>, но имеет некоторые специальные функции:

app.directive('skInput', function(){ 
     return { 
      restrict: 'A', 
      replace:true, 
      template: '<div style="display:inline-block">\ 
         <span ng-show="disabled">{{model}}</span>\ 
         <input ng-hide="disabled" placeholder="{{placeholder}}" type="text" class="sk-input" ng-model="model" stop-event ng-required="isRequired"/>\ 
         </div>', 
      require: ['ngModel'], 
      scope:{ 
       'width':'@', 
       disabled: '=ngDisabled', 
       model: '=ngModel', 
       placeholder: '@' 
      }, 
      link: function(scope, elem, attrs){ 
       if(angular.isDefined(scope.width)){ 
        elem.find('input').css('width', scope.width); 
       } 

       if(angular.isDefined(attrs.required)){ 
        scope.isRequired = true; 
       }else{ 
        scope.isRequired = false; 
       } 
      } 
     } 
    }); 

Проблема в том, что я хочу, чтобы рассматривать эту директиву вроде input, который может включать в себя ряд директив или атрибутов HTML5 как placeholder, ng-pattern, required и т. д. на них. Тем не менее, я должен связать атрибуты директив с базовым input вручную, как вы видите.

Есть ли способ рассказать Угловой, чтобы атрибуты на директиве располагались на элементе <input>, а не на элементе <div>? Таким образом, я могу сделать что-то вроде <span sk-input ng-pattern="\regex\"></span> и он будет автоматически производить

<div> 
    <span ng-show="disabled"></span> 
    <input ng-pattern="\regex\" /> 
</div> 

Вместо

<div ng-pattern="\regex\"> 
    <span ng-show="disabled"></span> 
    <input /> 
</div> 

Answer 1

Я думаю, что вы застряли делать это вручную, хотя может быть более простой способ сделать это (вы может смотреть на использование функции шаблона вместо строки).

Как угловое слияние атрибутов с использованием replace: true является внутренним и фактически тем, что они обесценивают. Here is a related question.

Функция шаблона получает исходный элемент и атрибуты.

template: function(elem, attr) { 
    var input = angular.element('<div><input></input></div>'); 
    for(var a in attr) { 
     //optional if statement for whitelist/blacklist, etc. 
     input.children().attr(a, attr[a]); 
    } 
    return '<div style="display:inline-block">\ 
       <span ng-show="disabled">{{model}}</span>' + 
       input.innerHTML + 
      '</div>' 
    //build up your template here 
} 

делая это таким образом, может даже позволить вам уйти без использования изолированного объема (который сделал бы вашу директиву более рядным с другими ng- директивами).