javascript - 将属性应用于 Angular Directive(指令)中的自定义嵌套元素

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" 以使输入模型正常工作。正如您在此处的属性注释中指出的那样，使用 {{}} 表示法。然后将您的父属性设置为类似 data-min 这样就不会出现丑陋的源代码。