Question

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

（我简化了问题，因此项目只有一个字段“name”。我的实际用例有更多字段，但在规范上是等效的。）

我遇到了一些看起来像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>

我的控制器看起来像这样：

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

点击Edit链接会调用正确的控制器功能，以及第一个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的兄弟姐妹：在我的用例中，它们实际上被实现为两个tr，它们应该出现在每个

<div class="container">
     <div class="wrap">
           <div class="text">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
    </div>
</div>

.container {
    position: relative;
    padding:20px;
    background: #ccc;
    float:left;
}
.text {
    position: relative;
    float:left;
    background: lightblue;
}

.wrap {
    position: absolute;
}

的正下方另一张桌子。

Answer 1

这不是角度的错误，但它是非常符合逻辑的。

<Modal>

如果你看到上面的代码，你只将控制器注入第一个div，所以很明显兄弟div不知道什么是ctrl或ItemCtrl，除非你按照第二种方式进行操作。

因此，如果您希望将其作为兄弟实现，那么如果您使用路由，则在路径路径中添加控制器属性。

这样控制器就会对整个模板起作用，你可以实现你想要的效果。

希望它有所帮助。

Answer 2

多数民众赞成因为控制器有自己的范围。当您将控制器仅放置在您的第一个div控制器上时范围仅限于此div。当你将divs包裹在另一个内部并将控制器放在包装器，控制器和＃39;范围现在就是这个包装器中的所有内容。所以在这种情况下这很好用，这不是角度错误

AngularJS - 两个兄弟DOM元素上的一个控制器

2 个答案: