AngularJS: how to get form action attribute

Question

I'm new to AngularJS, and may be doing something completely wrong, therefore, don't judge too strictly please.

I have a form:

<form method="post" action="/secured/login_check" id="login-form" submit="loginCheck()" name="loginForm">
    <input type="text" name="_username" ng-model="data.username"/>
    <input type="password" name="_password" ng-model="data.password"/>
    <button class="btn btn-primary" type="submit">Sign in</button>
</form>

And I have an application:

var smsApp = angular.module('smsApp', []);

smsApp.controller('LoginCtrl', function($scope) {
    $scope.loginCheck = function() {
        $.ajax({
            url: '/secured/login_check', // here I want to use form action attr value
            data: {
                _username: $scope.data.username,
                _password: $scope.data.password
            },
            success: function(){
                console.log('logged in');
            },
            error: function(){
                console.log('login failed');
            }
        });
    };
});

smsApp.directive('submit', function() {
    return function (scope, element, attrs) {
        element.bind('submit', function() {
            scope.$apply(attrs.submit);
            return false;
        });
    }
});

My main question is: how can I pass attrs and/or element to $apply call? Or how else can I get this information inside $scope.loginCheck? This is to set the ajax's url parameter dynamically.

I, of course, can use $('#login-form').attr('action') inside the loginCheck procedure, but I believe there can be a better way ("more angular way") of doing that.

The reason why I want to take this attribute, is that it's generated from a PHP application and it's different for dev and prod environments. Moreover, I want to have it configurable in one place rather then in multiple ones.

p.s. If you can provide a completely different solution, but keeping the original idea, I'd be also interested in it.

score 1 · Accepted Answer · edited May 23 '17 at 12:10

However, finally, I realized that my idea was completely wrong by design, and I changed everything, I can now say, how it's possible to obtain the action attr.

It is easily doable with the directive:

HTML:

<form action="/secured/login_check" my-directive ...other attrs...>
   <!-- ... -->
</form>

JS:

var myDirectives = angular.module('myDirectives', []);

myDirectives.directive('myDirective', ['MyService', function(MyService) {
    var directiveDefinitionObject = {
        restrict: 'A',
        link: function (scope, iElement, iAttrs, controller, transcludeFn) {
            MyService.setAction(iAttrs.action);
        }
    };
    return directiveDefinitionObject;
}]);


var myServices = angular.module('myServices', []);

myServices.factory('MyService', function(){
    var action = '';
    return {
        setAction: function(val) {
            action = val;
        },
        getAction: function() {
            return action;
        }
    };
});

Now, when the directive gets linked, MyService is set to the actual action attribute that is possible to use anywhere in AngularJS by inecting MyService. It of course takes more lines than a jQuery call, but finally forces you splitting MVC parts, and also makes you think how to do the stuff better.

P.S. Please avoid using $.ajax() in your applications (see: Why use $http in Angular instead of jquery's ajax?).

AngularJS: how to get form action attribute

1 Answers1