添加類transcluded元素

Question

比方說，我有一個指令，看起來像這樣：

<input class="icon-input" type="text"> 

我想這結束了：

<div class="col-xs-12"> 
    <i ng-class="icon"></i> 
    <input class="icon-input" type="text" class="form-control"> 
</div> 

（以上釷顯著的部分是class="form-control"）

我的指令目前看起來是這樣的：

'use strict'; 

class IconInput { 
    constructor() { 
    this.restrict = 'C'; 
    this.replace = true; 
    this.transclude = 'element'; 
    this.templateUrl = 'app/form-fields/icon-input/icon-input.html'; 
    this.scope = { icon: '@' } 
    } 
} 

export default IconInput; 

如何將class="form-control"添加到我包含的input元素中？

Answer 1

我最終搞清楚了自己。

'use strict'; 

class IconInput { 
    constructor() { 
    this.restrict = 'C'; 
    this.transclude = true; 
    this.scope = { icon: '@' }; 

    this.compile = (element, attrs, transclude) => { 
     return $scope => { 
     transclude($scope, clone => { 
      element.append(clone) 
      .wrap('<div class="col-xs-12"></div>') 
      .before(`<i class="fa ${$scope.icon}"></i>`) 
      .addClass('form-control'); 
     }); 
     }; 
    }; 
    } 
} 

export default IconInput;