3

这是我们通常在 twitter boostrap 表单中看到的代码片段:

 <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>

表单代码中有很多字段会很吵,所以我想在我的 Angular 驱动的 html 中使用这样的东西:

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

这可以通过Angular中的指令来完成吗?

4

1 回答 1

3

是的,可以做到

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

于 2013-04-10T13:49:16.240 回答