Question

我正在玩Angular并且遇到了一个问题。我在“编辑”按钮上设置的切换功能一直有效，直到我点击“保存”或“取消”按钮。然后它再也不起作用了。

这是我的Plunker： http://plnkr.co/edit/Vy2WeUkk7jvIjp1z8Sfi

<section ng-controller="ContactController">
<ul class="list-group">
    <li class="list-group-item" ng-repeat="contact in contacts">
        <h3>
            {{ contact.id }}
            <em class="pull-right">{{contact.fname }} {{ contact.lname }} <button ng-click="editing = !editing">Edit</button></em>
            <form ng-show="editing" ng-submit="editing = false" ng-controller="FormController">
                <input type="hidden" ng-model="contact.id">
                <label>First Name:</label>
                <input type="text" ng-model="contact.fname" placeholder="first name" ng-required/>
                <label>Last Name:</label>
                <input type="text" ng-model="contact.lname" placeholder="last name" ng-required/>
                <br/>
                <button class="btn" ng-click="Save();" type="submit">Save</button>
                <button class="btn" ng-click="editing = false">Cancel</button>
              </form>
        </h3>
    </li>
    </ul>
    </section>

任何帮助都将不胜感激。

Answer 1

ng-repeat指令为它迭代的联系人元素创建一个新范围。我们称之为联系范围。由于“编辑”按钮位于联系范围内，因此单击该按钮将在联系范围上创建editing属性。

当您使用ng-controller指令创建FormController时，您正在创建子范围，我们将其称为表单范围，其原型是联系范围。这就是您可以直接从子作用域访问父作用域中的属性的原因，以及ng-show指令最初在您的代码中起作用的原因。

但是，单击“取消”按钮时，您将直接在表单范围上将editing属性设置为false，这将覆盖联系范围上的editing值。由于您在editing指令中的表单范围引用ng-show，因此“编辑”按钮会修改联系范围上的editing，因此永远不会再显示该内容。

解决此问题的方法是在表单范围内引用编辑时使用范围的$parent属性。这可确保您在联系范围内观看和修改editing。

<section ng-controller="ContactController">
<ul class="list-group">
<li class="list-group-item" ng-repeat="contact in contacts">
    <h3>
        {{ contact.id }}
        <em class="pull-right">{{contact.fname }} {{ contact.lname }} <button ng-click="editing = !editing">Edit</button></em>
        <form ng-show="$parent.editing" ng-submit="$parent.editing = false" ng-controller="FormController">
            <input type="hidden" ng-model="contact.id">
            <label>First Name:</label>
            <input type="text" ng-model="contact.fname" placeholder="first name" ng-required/>
            <label>Last Name:</label>
            <input type="text" ng-model="contact.lname" placeholder="last name" ng-required/>
            <br/>
            <button class="btn" ng-click="Save();" type="submit">Save</button>
            <button class="btn" ng-click="$parent.editing = false">Cancel</button>
        </form>
    </h3>
</li>
</ul>
</section>

提交后角度切换不起作用

1 个答案: