使用Bootstrap Validation Plugin时,AngularJS范围不可用

时间:2017-05-24 04:55:03

标签: jquery angularjs angularjs-scope

我尝试将此插件与angularjs一起使用来验证表单http://1000hz.github.io/bootstrap-validator/ plugimg

我已经尝试了很多,但我不知道为什么在插件提交方法中无法访问范围变量。希望有人能帮助我!

这是控制器

 app.controller('LoginController', function($scope,$http,$localStorage) {

      //initialize plugin on controller load
      $('#loginform').validator();

      //gets called on form submit
      $('#loginform').validator().on('submit', function (e) {

        //below line says : if there are no errors then coninue
        if (!e.isDefaultPrevented()) {
            $http.post('api/user/login',{
                email: $scope.email, // is undefine
                password: $scope.password // is undefined
            }).then(function successCallback(response) {
                $localStorage.isLoggedIn = 1;
            }, function errorCallback(response) {

            });
        }

        //prevent form submit
        return false;

      });

  });

HTML

<div class="container" ng-controller="LoginController">

  <form class="form-horizontal" novalidate id="loginform">

    <div class="form-group">

      <label for="email" class="col-md-4 control-label">E-Mail ID</label>
      <div class="col-md-6">
        <input id="email" type="email" class="form-control" name="email" ng-model="email" required> </div>
    </div>

    <div class="form-group">
      <label for="password" class="col-md-4 control-label">Password</label>

      <div class="col-md-6">
        <input id="password" type="password" class="form-control" name="password" ng-model="password" required>

      </div>
      </div>


      <div class="form-group">
        <div class="col-md-6 col-md-offset-4">
          <button class="btn btn-primary">
            <i class="fa fa-btn fa-sign-in"></i> Login
          </button>

        </div>
      </div>

  </form>
  </div>

1 个答案:

答案 0 :(得分:0)

当触发提交事件时,function myfoo(){ // Write your logic here $.ajax({ type: "POST", url: "update.php", dataType: 'json', async: false, data: {Eventid: 'Eventid',Seats:'Seats'}, success: function (r) {} }); } $scope.email的值将是未定义的,因为您创建了一个在angulars controll之外执行的事件(在摘要循环之外进行脏检查可能的)。

解决方案是删除jQuery代码并仅使用角度代码。