Применить атрибуты к пользовательскому вложенному элементу в угловой директиве

Question

В настоящее время я создаю один из моих собственных пользовательских элементов HTML с директивой AngularJS. Я хочу настроить тип ввода диапазона из HTML5. Пока все хорошо, мои первые шаги были сделаны с успехом. Но теперь я хочу улучшить текущее состояние с помощью вложенного шаблона. На данный момент у меня есть. как это:

.directive("mySlider", [function() { 
    return { 
     restrict: "E", 
     replace: true, 
     scope: { 
      min: "@", 
      max: "@", 
      step: "@?", 
      ngModel: "=" 
     }, 
     template: "<input class='my-slider' type='range'>", 
     link: function ($scope, $element) { 

      //some logic here 
     } 
    } 
}]); 

С, что, если я использую

<my-slider min="0" max="10" step="1" ng-model="sth"></my-slider>

я замена так:

<input class="my-slider" type="range" min="0" max="10" step="1" ng-model="sth">

То хорошо, как атрибуты из сферы написаны к типу ввода и затем можно использовать напрямую.

Но вот моя проблема: Теперь я хочу некоторый выходной HTML, как:

<div>

<label>blah</label>

<input class="my-slider" type="range" min="0" max="10" step="1" ng-model="sth">

</div>

Так что мой входной элемент должен быть вложен в div, возможно, с дополнительным элементом, например ярлыком или СТГ. Но когда я обновляю свой шаблон и просто занимаюсь размещением моего ввода там, все атрибуты из области действия применяются к корневому элементу (в этом случае div). Я не хочу их там, кроме элемента ввода.

Возможно ли и как можно добиться применения определенных атрибутов из области действия директив к различным конкретным элементам?

Answer 1

Изменить ngModel: "=" на sth: "=ngModel" чтобы получить модель ввода. Используйте {{}} нотацию, как вы указали в комментариях здесь для атрибутов. А затем сделайте свои родительские атрибуты примерно такими, как data-min, чтобы у вас не было уродливого исходного кода.