javascript - angularディレクティブは常に属性を外側の要素のラッピングに追加します

Question

私は角度が初めてで、これで壁に頭をぶつけています：

ラベルにラップされた input type="range" を生成する再利用可能なスライダー要素を作成しています。

ディレクティブで定義された属性を、ディレクティブのテンプレートで定義された子入力要素に適用する必要がありますが、それらはラッピング ラベル要素にも追加されます。これは面倒なようで、基本的なものが欠けていると思います。

これを行う最善の方法は何ですか？コンパイル機能を使用する必要がありますか?それは、ディレクティブにテンプレートを含める目的を無効にするように思われますか?

現在のhtml:

<slider min="0" max="1000" step="1" label="foo" ng-model="slider1" value="750">
</slider>

現在のディレクティブ:

myApp.directive('slider', function() {
return {
    restrict: 'AE',
    scope:{
        data:'=ngModel',
        min:'@',
        max:'@',
        step:'@',
        label:'@',
        value:'='
    },
    replace: 'true',
    template: '<label>{{label}}<input min="{{min}}" max="{{max}}" step="{{step}}" type="range" ng-model="data" value="{{value}}" />{{data}}</label>'
};

});

現在の出力:

<label min="0" max="1000" step="1" label="foo" ng-model="slider1" value="250" class="ng-isolate-scope ng-pristine ng-valid ng-binding">
    foo
    <input min="0" max="1000" step="1" type="range" ng-model="data" value="250" class="ng-pristine ng-valid">
</label>

望ましい出力:

<label>
    foo
    <input min="0" max="1000" step="1" type="range" ng-model="data" value="250" class="ng-pristine ng-valid">
</label>