将属性应用于角度指令中的自定义嵌套元素

Question

我目前正在使用 AngularJS 指令构建我的第一个自定义 HTML 元素。我想从 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" 以使输入模型正常工作。使用您在此处的 cmets 中为属性指出的 {{}} 表示法。然后让你的父属性像data-min 这样你就没有丑陋的源代码。