角元素包裝指令

Question

下面的代碼片段，我們通常看到的Twitter自舉形式：

<div class="control-group"> 
    <label class="control-label" for="email">Enter Email</label> 
    <div class="controls"> 
     <input type="email" name="email" ng-model="member.email" required > 
    </div> 
</div> 

有很多領域的表單代碼中得到相當嘈雜，所以我想用這樣的事情在我的角度供電html：

<formy label-for="email" label-text="Enter Email"> 
     <input type="email" name="email" ng-model="member.email" required > 
</formy> 

這可以通過指令在Angular中完成嗎？

Answer 1

是的，這是可以做到

app.directive('formy', function() { 
    return { 
     restrict: 'E', 
     transclude: true, 
     scope: { 
      labelText: "@", 
     labelFor: '@' 
     }, 
     template : '<div class="control-group">' + 
     '<label for="{{labelFor}}" class="control-label">{{labelText}}</label>' + 
     '<div class="controls" ng-transclude></div>' + 
     '</div>', 
     replace: true 
    }; 
}) 

演示：Plunker