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

这可能是因为你使用了undefined behavior。在这种情况下，angularjs需要在某处应用您的属性，只需要replace: true来修复它。请注意，这并不重要，在一天结束时，属性已正确应用于“输入”。

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

此外，你还想要

将false替换为{{ model }}，否则无效。
使用model代替ng-value以避免Chrome开发者工具栏中出现警告。

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

请参阅this plunker。

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

1 个答案: