AngularJs 将指令的元素附加到其模板

Question

如何将指令元素附加到其模板？ 像这样：

.directive('labelize',function(){
   return {
      restrict: 'A',
      template: '<div><ng-element/></div>'
      ...
   }
});

# Html
// <input labelize name="name"/>

# Output
// <div><input name="name"/></div>

更新

当我使用这个指令时：

app.directive 'labelize', () ->
      restrict: 'A'
      requrie: 'input'
      controller: [
           '$scope', '$element', '$attrs',
           ( $scope , $element , $attrs ) ->
                  $scope.label = $attrs.placeholder
      ]
      replace: true
      transclude: 'element'
      template: '<div class="labelize"><span class="label">{{ label }}</span><ng-transclude/></div>'

使用这个 html ：

<input labelize placeholder="Name" ng-class="{ 'red': true }" ng-focus="Focused()"/>

<!-- Angular compiled output -->
<div class="labelize" labelize placeholder="Name" ng-class="{ 'red': true }" ng-focus="Focused()" class="red">
    <input labelize placeholder="Name" ng-class="{ 'red': true }" ng-focus="Focused()"/>
</div>

ngFocus、ngClass 或任何 ng 属性在 labelize 指令之后不起作用。

Answer 1

您可以为此使用 transclue:'element' 。

 .directive('labelize',function(){
    return {
        restrict: 'A',
        template: "<div ng-transclude></div>",
        replace:true,
        transclude: "element",


    }

输入：<input labelize name="name" />

输出：<div labelize="" name="name" ng-transclude=""><input class="ng-scope" labelize="" name="name"></div>

我希望它对你有用。