Mengklik butang akan menyebabkan borang dimuat semula.
<p>Saya mempunyai borang dalam Angular dengan dua label butang. Butang menyerahkan borang pada <code>ng-click</code>. Butang lain adalah semata-mata untuk navigasi menggunakan <code>ng-click</code>. Walau bagaimanapun, apabila butang kedua ini diklik, AngularJS menyebabkan halaman dimuat semula, mencetuskan ralat 404. Saya menetapkan titik putus dalam fungsi dan ia mencetuskan fungsi saya. Jika saya melakukan mana-mana perkara berikut, ia akan berhenti: </p>
<ol>
<li>Jika saya mengalih keluar <code>ng-click</code>, butang itu tidak menyebabkan halaman dimuat semula. </li>
<li>Jika saya mengulas kod dalam fungsi, ia tidak menyebabkan halaman dimuat semula. </li>
<li>Jika saya menukar label butang kepada label sauh (<kod><a></code>) dan menambah <kod>href=""</code>, ia tidak menyebabkan segarkan semula. </li>
</ol>
<p>Yang terakhir nampaknya merupakan penyelesaian yang paling mudah, tetapi mengapakah AngularJS menjalankan sebarang kod selepas fungsi saya yang menyebabkan halaman dimuat semula? Nampak macam pepijat. </p>
<p>Ini ialah borang: </p>
<pre class="brush:php;toolbar:false;"><form class="form-horizontal" name="myProfile" ng-switch-when="profile">
<set medan>
<div class="control-group">
<label class="control-label" for="passwordButton">Kata Laluan</label>
<div class="controls">
<button id="passwordButton" class="secondaryButton" ng-click="showChangePassword()">Change</button>
</div>
</div>
<div class="buttonBar">
<button id="saveProfileButton" class="primaryButton" ng-click="saveUser()">Save</button>
</div>
</fieldset>
</form></pre>
<p>Ini ialah kaedah pengawal: </p>
<pre class="brush:php;toolbar:false;">$scope.showChangePassword = function() {
$scope.selectedLink = "changePassword";
};</pre>
<p><br /></p>