javascript - 如何声明一个与 ng-repeat 类似的变量，但对于单个对象？

Question

我使用 ng-repeat 来重用部分 html 类，如下所示。由于 Angular 的魔力，这一切都很完美。

父级 HTML:

<div ng-repeat="item in vm.items">
    @Html.Partial("_ItemViewer")
</div>

部分Html“_ItemViewer”的相关部分:

<textarea class="form-control" rows="3" name="description"
    ng-model="item.description"></textarea>

我可以在部分中引用“item”，它会正确绑定(bind)。这正是我想要的行为，但是在单个对象上，而不使用 ng-repeat。

我的 Controller “vm”有两个独立的属性“A”和“B”。它们是同一种物体。它们可能并不总是如此，但就目前而言，它们是。这就是为什么它们共享相同的部分 Html 表单。

例如:

<fieldset>
    <legend>ItemA</legend>
    @Html.Partial("_SingleItem")
</fieldset>

<fieldset>
    <legend>ItemB</legend>
    @Html.Partial("_SingleItem")
</fieldset>

我希望能够将它们作为变量引用，就像 ng-repeat 中所做的那样。相反，我必须在部分“_SingleItem”中指定模型，如下所示:

<input class="form-control" type="text" name="name" 
    ng-model="vm.itemA.name">

这会破坏部分的重用。我需要的是能够执行如下所示的操作:

<input class="form-control" type="text" name="name" 
    ng-model="item.name">

我怎样才能做到这一点？

Answer 1

您可以简单地创建一个自定义指令，该指令将在指定名称下为所需值添加别名，如下所示:

app.directive('myValue', function () {
    return {
        scope: true,
        link: function (scope, element, attrs) {
            //attach the value to the scope under an alias
            //just like ng-repeat does
            scope[attrs.newName] = scope.$eval(attrs.myValue);  
        }
    };
 });

然后在模板中将部分内容包装在该指令中:

<div my-value="vm.itemA" new-name="item">
    <input class="form-control" type="text" name="name" 
      ng-model="item.name">
</div>