2015-04-22 4 views
1

Скажем, у меня есть директива, которая выглядит следующим образом:Добавить класс включены через элемент

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

(. Th значительная часть выше 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?

+0

Вы должны перенести только входные данные и передать класс снаружи, int определение ввода. – Fals

+0

Что вы подразумеваете под «переводить ввод только»? Я думал, что это то, что я делаю. –

+0

Как вы это делаете, все заменяется шаблоном. Если вы используете ng-transclude как часть шаблона, он заменит исходный вход + остальную часть шаблона. – Fals

ответ

2

Я закончил тем, что понял это сам.

'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; 
Смежные вопросы