Angular js toggle button after field validation

Question

I have an in which validations are done using angularjs.On submitting the form button is disabled and will enable after getting the response.But button is not getting enabled.For disabling the button I have written a directive.

directives.directive('kcAjaxBtn', function (){
        return {
            'priority' : 9999,
            'restrict' : 'A',
            'link' : function(scope, element, attrs) {
            element.bind('click', function() {
                var currHtml = element.html();
                element.attr('disabled', 'disabled').html('Please wait&hellip;');
                var offMe = scope.$watch(KC_AJAX_COMPLETED, function(){
                    element.removeAttr('disabled').html(currHtml);
                    offMe();
                });

            });
        }
    }
});

and in services.js it is given like

angular.module('kint.services.general').config([
    '$httpProvider',
    function($httpProvider){
        $httpProvider.interceptors.push(function($q, $rootScope){
            return {
                'request': function(config) {
                   return config || $q.when(config);
                },

                'response' : function(response) {
                    $rootScope.$broadcast(KC_AJAX_COMPLETE, response);
                    return response || $q.when(response);
                },

                'responseError' : function(response) {
                    $rootScope.$broadcast(KC_AJAX_COMPLETE, response);
                    switch(response.status) {
                        case 401:
                            window.location.reload();
                    }
                    return $q.reject(response);
                }
            };
        });
    }
]);

But the button is not enabling,if some fields are invalid.How to resolve it?

asgoth · Accepted Answer · 2014-02-26 10:39:44Z

You're broadcasting an event in your service with $broadcast, but $watch is not for receiving it. You need to use $on for receiving events.

Also, in your directive, I would inject $rootScope. Then there is no need to use $broadcast anymore. You can use $emit instead.

So your directive becomes:

directives.directive('kcAjaxBtn', ['$rootScope', function ($rootScope){
        return {
            'priority' : 9999,
            'restrict' : 'A',
            'link' : function(scope, element, attrs) {
               element.on('click', function() {
                   var currHtml = element.html();
                   element.attr('disabled', 'disabled').html('Please wait&hellip;');    
               });
               $rootScope.$on(KC_AJAX_COMPLETED, function(){
                   element.removeAttr('disabled').html(currHtml);
                });
           }
       }
}]);

In your service, use $emit:

$rootScope.$emit(KC_AJAX_COMPLETE, response);

Note: this is untested, you need to make sure that your service is really emitting an event (by debugging e.g. in Chrome dev tools).

Collectives™ on Stack Overflow

Angular js toggle button after field validation

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