角元素包装指令

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