angularjs - $http request not working within a directive definition

Question

This is how my code is structured:

View:

<form action="./?app,signin" method="post" id="signinform" name="signinform" novalidate vibrating loginform>
(...)
</form>

JavaScript:

angular.module('loginApp', [])
    .directive('loginform', function ($http) {
         return function (scope, elm, attrs, ctrl) {
            elm.submit(function (e) {               
                if ($(elm).hasClass('ng-valid')) {
                   console.log('X'); 
                   $http.get('./?app,validateCredentials&username=admin&password=admin')
                        .success(function (d, s, h, c) {
                            console.log('A');

                        })
                        .error(function(d, s, h, c) {
                            console.log('B');
                        })
                    ;
                    e.preventDefault();         
                }
            });
         }
    })    
.controller('loginCtrl', function($scope, $filter, $window, $location, $http) { (...)

The 'X' is logged in the console, but the $http request does not work. Any idea why?

Is the request being made? (Network tab in Web Inspector of Chrome or Safari.) — jpsimons
– jpsimons, Commented Jun 28, 2013 at 6:14

robertklep · Accepted Answer · 2013-06-28 05:56:41Z

4

Since you're calling Angular code from within a non-Angular event handler, try wrapping the request in scope.$apply():

elm.submit(function (e) { 
  if ($(elm).hasClass('ng-valid')) { 
    console.log('X');
    scope.$apply(function() {
      $http.get('./?app,validateCredentials&username=admin&password=admin')
        .success(function (d, s, h, c) {
          console.log('A');

        })  
        .error(function(d, s, h, c) {
          console.log('B');
        })  
      ;
    });
    e.preventDefault();
  } 
});

answered Jun 28, 2013 at 5:56

robertklep

205k38 gold badges421 silver badges412 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

angularjs - $http request not working within a directive definition

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related