Javascript 将自定义指令中的作用域正确应用于AngularJS中的子元素

所以我有一个自定义指令：

function numberPickerDirective() {
        return {
            template: template,
            replace: 'true',
            restrict: "E",
            scope: {
                id: "@",
                name: "@",
                model: "=",
                value: "@",
                min: "@"
            },

        }
    }

我的模板如下所示：

<div class="number-picker">

    <input id="{{id}}" name="{{name}}" ng-model="{{model}}"
        ng-value="{{value}}" value="{{value}}" min="{{min}}" required
        type="number" />

    <div class="number__controls">
        <button class="number__control-btn up-icon">
            <svg viewBox="0 2 10 5" width="10" height="5" fill-rule="evenodd">
                <path d="M10 5L5 0 0 5z"></path>
            </svg>
        </button>

        <button class="number__control-btn down-icon">
            <svg viewBox="0 2 10 5" width="10" height="5" fill-rule="evenodd">
                <path d="M10 0L5 5 0 0z"></path>
            </svg>
        </button>
    </div>
</div>

在我看来，我在应用该指令时：

<number-picker 
    id="inteval"
    name="SizeSec"
    ng-model="m.SizeSec"
    value="30"
    min="1"
    required
    type="number"
    />

---

问题是，当我希望将所有范围变量应用于输入标记时，它们都应用于顶级div。有人能解释为什么会发生这种情况以及如何修复它吗？

这可能是因为您使用了replace:true。在这种情况下，angularjs需要在某个地方应用您的属性，只需输入replace:false即可修复它。请注意，这其实并不重要，在一天结束时，属性会正确应用于输入

此外，最好使用假值，因为Angular 2+不允许您用其内容替换指令，因此它将帮助您更轻松地迁移到Angular 2+

此外，你会想

用model替换{{model}}，否则它将无法工作。 使用ng值而不是值以避免在Chrome developer工具栏中出现警告。 请注意，我使用NG1.7.2对其进行了测试，结果与预期一致

---

请参见。

我不理解您的问题，您是否介意将其重新表述？当我在呈现元素时检查元素时，结果是：由于某种原因，并非所有参数都应用于错误的元素。啊哈！我认为是模型的改变解决了这个问题。但现在是div和input？你是什么意思？如果您坚持使用replace:true，我的指令标记将消失，因此angularjs将您的属性应用于第一个子元素，因此您的div。这就是为什么我建议您使用replace:false来确保属性应用于我的指令，而不是第一个元素。此外，它更干净，更符合web组件样式。顺便说一句，我在我的回复中添加了一个plunker让你看。啊，我传递的是'false'而不是false。谢谢你的帮助！