将自定义指令中的范围正确应用到 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 即可修复它。请注意，这并不重要，归根结底，该属性已正确应用于 "input".

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

此外，您还需要

将{{ model }}替换为model，否则无效。
使用 ng-value 而不是 value 以避免在 Chrome 开发人员工具栏中出现警告。

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

见this plunker。

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

Properly applying scope in a custom directive to a child element in AngularJS

html

javascript

angularjs

angularjs-directive