Injecting jquery events/functions into angularjs

Question

I currently have this block of code:

$('.btn').click(function() {
   $(this).removeClass('big-red-button');
   $(this).addClass('btn-loading');

   $(this).find('.text').text('Working..');

   $(this).find('.state').addClass('loading');
   $(this).find('i').replaceWith('<img src="/images/loading.gif">'+'</img>');

});

What it does is when the specified button is clicked it changes the buttons CSS, disables it and sets the text to "Working.." this is to let the user know that an action is being executed, i know there are other ways of doing this but i prefer this way. My issue now is i am using angularjs and i have ng-click on the button that executes a function, now before that function starts i wat to execute the above jquery code and when the function completes i want to execute a similar jquery code to change the buttons properties again.

This is my ng-click function():

$scope.addTicket = function(ticket, schedule_id) {
    // Set button into working state        
    // Do stuff here
    // Set button into completed state
};

Now if i was using jquery alone i would be able to do this but now i do not know how to make my jquery code work with angular.

You should create a custome directive and change the css of the element. See docs.angularjs.org/guide/directive, weblogs.asp.net/dwahlin/… — Norbor Illig
– Norbor Illig, Commented Mar 17, 2015 at 13:47
@RobsonGilli is right, you can easily achieve this by creating directive — Pankaj Parkar
– Pankaj Parkar, Commented Mar 17, 2015 at 15:12
Okay, i know how to create a directive but 'm confused as to how to implement it to solve this issue. — user3718908x100
– user3718908x100, Commented Mar 17, 2015 at 18:13

Pankaj Parkar · Accepted Answer · 2015-03-18 06:11:11Z

1

You directive will look like below, and then we will remove ng-click method.

Markup

<button my-directive add-ticket="addTicket()"></button>

Directive

app.directive('myDirective', function() {
    restrict: 'E',
    link: function(scope, element, attrs) {
        element.on('click', function() {
            element.removeClass('big-red-button');
            element.addClass('btn-loading');
            element.find('.text').text('Working..');
            element.find('.state').addClass('loading');
            element.find('i').replaceWith('<img src="/images/loading.gif">' + '</img>');
            scope.$apply(attrs.addTicket);
        });
    }
});

answered Mar 18, 2015 at 6:11

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

Collectives™ on Stack Overflow

Injecting jquery events/functions into angularjs

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