防止AngularJS中的默认事件无法正常工作

时间:2013-02-18 20:46:37

标签: javascript html html5 angularjs

这是我的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);"

知道我做错了什么吗?似乎应用范围有些不对。

1 个答案:

答案 0 :(得分:0)

如我所见,只需将onsubmit="return false"添加到<form>即可完成工作:http://plnkr.co/edit/a7bUU1VWAZOUYyXQjvF3?p=preview