【问题标题】:Preventing default event in AngularJS doesn't work correctly防止 AngularJS 中的默认事件无法正常工作
【发布时间】:2013-02-19 04:59:27
【问题描述】:

这是我的 HTML 表单:

<form class="form-login" name="loginForm" novalidate ng-submit="login()">
    <fieldset>
        <h2>Login</h2>
        <input type="text" required class="input-block-level" placeholder="Username" ng-model="username" name="username" tabindex="1" xs-input-sync>
        <input type="password" required class="input-block-level" placeholder="Password" ng-model="password" name="password" tabindex="2" xs-input-sync>

    </fieldset>
</form>

这是提交表单时调用的控制器方法:

$scope.login = function() {
        $http.post($scope.serviceUrls.getAuthenticationUrl($scope.username), {
            "password": $scope.password
        }).success(function(data, status, headers) {


        }).error(function(data, status) {

        });
        return false;
    }

到目前为止一切正常。但是由于浏览器只有在表单上设置了action="/" 属性时才会显示本机“记住密码”对话框,所以我也在表单上添加了它。

添加action="/" 后,无论我尝试什么,都会在按下 Enter 键或登录按钮时提交表单。我也尝试将$event 参数添加到html login 函数调用中,然后执行$event.preventDefault(); 但仍然不行。

同样的事情发生在像这样的网址上:

<a class="xs-btn edit-btn" ng-click="toggleEditMode($event)"></a>

我试过了:$event.preventDefault();return false;,添加href=""href="#"。但是没有任何工作,我总是被重定向到站点的根目录。唯一有效的是href="javascript:void(0);"

知道我做错了什么吗?应用范围内似乎有问题。

【问题讨论】:

  • 你能向 Plunker 发布一个简单的小例子吗?你提到'a'对你也不起作用,所以这里有一个例子证明:plnkr.co/edit/9ZhXUtewqNwq31JSdQfT?p=preview
  • 我会尝试在那里找到可重现的东西并从中创建一个 plunker。我无法在这里复制整个项目:) 你认为它与后端 url 重写有关吗?就像它在文档中所说的那样,我将所有内容重写为 AngularJS 代码运行的 index.html。
  • 这是一个笨蛋:plnkr.co/PhO4uL。似乎它仅在 url 内部包含“http://”时才有效。否则你会被重定向到一个页面。
  • 嗯...我只是没看到。我添加了一个记录器,以便您查看。当您单击它们然后没有重定向时,您是否没有看到所有条目日志? plnkr.co/edit/ujkPOR?p=preview
  • 我明白你现在在说什么了。您只需阻止事件传播:plnkr.co/edit/ujkPOR?p=preview

标签: javascript html angularjs


【解决方案1】:

如我所见,只需将 onsubmit="return false" 添加到 &lt;form&gt; 即可:http://plnkr.co/edit/a7bUU1VWAZOUYyXQjvF3?p=preview

【讨论】:

  • 好点。但是在 AngularJS 文档中,它说默认情况下会阻止该事件。那有什么问题呢?
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-12-14
  • 2015-05-30
  • 1970-01-01
  • 2012-03-09
  • 2013-09-02
  • 1970-01-01
相关资源
最近更新 更多