我不熟悉有棱角的人,我的头撞在墙上:
我正在制作一个可重复使用的滑块元素,它将生成一个包含在标签中的输入 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>