Convert this function from jQuery to AngularJS

Question

I have this function in jQuery

$('.cancelPending').live('click', function(){

    if($(this).hasClass('opacity')){ return false; }
    $(this).addClass('opacity').html('<i class="icon icon-remove"></i>Cancelling...');
    var id = $(this).parents('.holiday').getId();
    //Etc...

How would I recreate that in Angular? So far I have just the empty function set up

<a class="cancelPending" ng-click="cancePending(p.id)" href="#"><i class="icon icon-remove"></i>Cancel Request</a>

...

$scope.cancelPending = function(id) {

}

What's the Angular way to manipulate the classes/html of an element? I think for the class it will be ng-class="{opacity: someVariable?}" but I can't think what the HTML would be.

It is with `ng-class` - you're right about that. Since your manipulating the DOM I would use a *directive* ! — tymeJV, Mar 04 '14 at 15:26
have you read [this one](http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background)? — Eliran Malka, Mar 04 '14 at 15:31

score 3 · Accepted Answer · answered Mar 04 '14 at 15:50

as tymeJV said, the "Angular way" manipulating the DOM is using directives.

Example: html:

<div ng-app="App"  >
    <div cancel-Pending="" myid='5' ><i class="icon icon-remove"></i>Cancel Request</div>
</div>

directive:

    app.directive("cancelPending", [function () {
    var isFullScreen = false;

    return {
        restrict: "A",
        scope:{
            myid:'@'
        },
        link: function (scope, element,attr) {

              var el= $(element);
                  el.on('click', function(){
                if($(element).hasClass('opacity')){ return false; }
                el.addClass('opacity').html('<i class="icon icon-remove"></i>Cancelling...');
                    console.log(scope.myid); //5                          
               // var id = el.parents('.holiday').getId();
                //Etc...
              });


        }
    };
}]);

Live example: http://jsfiddle.net/choroshin/5WxS2/1/

Convert this function from jQuery to AngularJS

1 Answers1