將自定義指令的屬性傳遞給子元素的簡單方法？

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，就像您看到的那樣。

有沒有辦法告訴Angular將指令上的屬性放在<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-指令）。