点击按钮将引发表单刷新的行为
P粉523625080
P粉523625080 2023-08-14 20:46:02
[HTML讨论组]

我在Angular中有一个表单,其中有两个按钮标签。一个按钮在ng-click上提交表单。另一个按钮纯粹用于使用ng-click进行导航。然而,当点击这个第二个按钮时,AngularJS会导致页面刷新,触发404错误。我在函数中设置了一个断点,它会触发我的函数。如果我执行以下任何操作,它就会停止:

  1. 如果我移除ng-click,按钮不会导致页面刷新。
  2. 如果我在函数中注释掉代码,它不会导致页面刷新。
  3. 如果我将按钮标签更改为锚标签(<a>)并添加href="",它就不会导致刷新。

后者似乎是最简单的解决方法,但为什么AngularJS在我的函数之后运行任何导致页面重新加载的代码?看起来像是一个bug。

这是表单:

<form class="form-horizontal" name="myProfile" ng-switch-when="profile">
  <fieldset>
    <div class="control-group">
      <label class="control-label" for="passwordButton">Password</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>

这是控制器方法:

$scope.showChangePassword = function() {
  $scope.selectedLink = "changePassword";
};


P粉523625080
P粉523625080

全部回复(2)
P粉637866931

你可以尝试阻止默认处理程序:

html:

<button ng-click="saveUser($event)">

js:

$scope.saveUser = function (event) {
  event.preventDefault();
  // 你的代码
}
P粉821274260

如果你查看W3C规范,似乎显而易见的尝试是在你不想要提交的按钮元素上标记type='button'

特别要注意的是它所说的位置

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号