将自定义指令中的范围正确应用于 AngularJS 中的子元素

Question

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

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，而我希望它们被应用于输入标签。谁能解释为什么会发生这种情况以及如何解决？

Answer 1

这可能是因为您使用了replace: true。在这种情况下，angularjs 需要在某处应用你的属性，只需输入replace: false 即可修复它。请注意，这并不重要，归根结底，该属性已正确应用于“输入”。

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

另外，你会想要

• 将{{ model }} 替换为model 否则不起作用。
• 使用 ng-value 而不是 value 以避免 Chrome 开发人员工具栏中的警告。

请注意，我使用 ng 1.7.2 对其进行了测试，它按预期工作。

见this plunker。