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中，可能还有一个像label或sth这样的附加元素。但是当我更新我的模板并且只是在那里嵌套我的输入时，指令范围的所有属性都应用于根元素（在本例中为div）。我不想在那里但是在输入元素上。

是否可以实现如何将指令范围中的某些属性应用于不同的特定元素？

Answer 1

将ngModel: "="更改为sth: "=ngModel"以使输入模型正常工作。正如您在此处的注释中指出的那样，使用{{}}表示法来表示属性。然后将您的父属性设置为data-min，这样您就不会有丑陋的源代码。

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

1 个答案: