AngularJS - 两个同级 DOM 元素上的一个 Controller

Question

我正在尝试做一件非常简单的事情。我正在显示一个值列表，旁边带有“编辑”链接。单击编辑链接会显示一个表单，可让您更新值。

(我简化了问题，因此这些项目只有一个字段“名称”。我的实际用例有更多字段，但在规范上是等效的。)

我遇到了一些看起来像是 Angular 中的 bug 的问题，但鉴于我的经验有限，我不太确定。我正在尝试这样做:

<div ng-repeat-start="item in items" ng-controller="ItemCtrl as ctrl" ng-hide="ctrl.isEditing">
    <span>Name: {{item.name}}.</span>
    <a href='#' ng-click='ctrl.startEditing()'>Edit</a>
</div>
<div ng-repeat-end ng-show="ctrl.isEditing">
    <input type='text' ng-model='item.name'/>
    <a href='#' ng-click='ctrl.save()'>Save</a>
</div>

我的 Controller 如下所示:

app.controller('ItemController', function() {
    this.isEditing = false;
    this.startEditing = function() { this.isEditing = true; }
    this.save = function() { this.isEditing = false; }
});

点击Edit link 调用正确的 Controller 函数，第一个 div隐藏。但第二个div不隐藏。

当我将代码重新排列为如下所示(本质上是用包装元素包装两个 div )时，一切都很好。

<div ng-repeat="item in items" ng-controller="ItemCtrl as ctrl">
    <div ng-hide="ctrl.isEditing">
        <span>Name: {{item.name}}.</span>
        <a href='#' ng-click='ctrl.startEditing()'>Edit</a>
    </div>
    <div ng-show="ctrl.isEditing">
        <input type='text' ng-model='item.name'/>
        <a href='#' ng-click='ctrl.save()'>Save</a>
    </div>
</div>

知道第一个版本在技术上有什么问题吗？请注意 <input>框中确实填充了 item.name 中的正确值.

PS:我试图保留这两个 div 是有原因的s sibling :在我的用例中，它们实际上是作为两个 tr 实现的应该在表格中出现在彼此的正下方。

Answer 1

这不是 Angular 错误，但它是非常合乎逻辑的。

<div ng-repeat-start="item in items" ng-controller="ItemCtrl as ctrl" ng-hide="ctrl.isEditing">
    <span>Name: {{item.name}}.</span>
    <a href='#' ng-click='ctrl.startEditing()'>Edit</a>
</div>

<div ng-repeat-end ng-show="ctrl.isEditing">
    <input type='text' ng-model='item.name'/>
    <a href='#' ng-click='ctrl.save()'>Save</a>
</div>

如果您看到上面的代码，则说明您仅将 Controller 注入(inject)到第一个 div 中，因此显然同级 div 不知道 ctrl 或 ItemCtrl 是什么，除非您按照第二种方式执行操作。

因此，如果您想以同级方式实现它，如果您使用路由，则在路由路径中添加 Controller 属性。

这样 Controller 将对整个模板有效，您就可以实现您想要的。

希望有帮助。