角度切換不工作後提交

Question

我玩弄角，來到的一個問題。我在編輯按鈕上設置的切換工作，直到我點擊保存或取消按鈕。然後它不再工作了。

這裏是我的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。既然你在你的ng-show指令引用的形式，範圍editing它是永遠不會因爲編輯按鈕上的接觸範圍修改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>