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

我目前正在使用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
        }
    }
}]);

.directive（“mySlider”，[function（）{
返回{
限制：“E”，
替换：正确，
范围：{
最小：“@”，
马克斯：“@”，
步骤：“@？”，
ngModel:“=”
},
模板：“”，
链接：函数（$scope$element）{
//这里有些逻辑
}
}
}]);

如果我使用

我得到一个这样的替代品：

这很好，因为范围中的属性被写入输入类型，然后可以直接使用

但我的问题是：现在我需要一些输出HTML，如：

blah

因此，我的输入元素应该嵌套在一个div中，可能还有标签之类的附加元素。但是当我更新模板并将输入嵌套在那里时，指令范围中的所有属性都应用于根元素（本例中的div）。我不希望它们出现在输入元素上

---

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

将

ngModel:“=”

更改为

sth:“=ngModel”

，以使输入模型工作。使用{{}}符号，正如您在这里对属性的注释中指出的那样。然后将您的父属性设置为类似于

data min

，这样您就不会有难看的源代码。

您好，谢谢您的帮助。在我看来，我只是将属性从根元素复制到嵌套元素？但我只想将它们应用于输入，并将它们从父div中删除。除此之外，我似乎无法从输入上的滑块访问ng模型。因为您的范围中没有名为“sth”的内容，如果你想让它起作用，你需要将隔离改为

sth:'=ngModel'

，这将给你一个双向绑定到指令ng模型的作用域变量sth。

var$input

位只将它应用于输入。如果希望将它们从父级中删除，则会失去指令的灵活性。这不重要，因为div上的“min”无论如何都不起任何作用。如果需要，可以使用

data min

作为前缀，使其不那么难看。数据前缀被angular忽略了，我认为内部代码不会改变。嗯，关于数据属性你是对的。我刚看到这条线，看起来它可以解决我的问题。对我来说，看起来干净多了。我不知道我可以通过{{}将作用域变量链接到任何元素：哦，是的，这更简单。这样做，编辑我的答案。