using jquery in angularjs?

Question

I was working on angularjs and i got strucked in using jquery with angularjs. Here is my html code.....

 <div class="packery ">
  <div class="item"></div>
  <div class="item h4"></div>
  <div class="item w2"></div>
  <div class="item"></div>
  <div class="item h2"></div>
  <div class="item w2 h2"></div>
  <div class="item"></div>
  <div class="item w4"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item h4"></div>
  <div class="item w2"></div>
  <div class="item"></div>
  <div class="item h2"></div>
  <div class="item w2 h2"></div>
  <div class="item"></div>
  <div class="item w4"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item h2"></div>
  <div class="item w2 h2"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item h2"></div>
  <div class="item w2"></div>
  <div class="item"></div>
</div>

here is my js code............

$( function() {


  var packery = $('.packery').packery();

  console.log(packery);

  packery.on( 'click', function( event ) {
    // remove clicked element
    packery.packery( 'remove', event.target );
  });
});

Please help me convert this jquery code to work in angularjs. I am new to jquery, I tried many ways to solve this.

Thanks in advance...

Is packery a JQuery plugin?

Trevor
– Trevor

2015-04-22 18:20:42 +00:00
Commented Apr 22, 2015 at 18:20 — Trevor
– Trevor, Commented Apr 22, 2015 at 18:20
yes it was packery jquery plugin..

harrini
– harrini

2015-04-23 05:23:14 +00:00
Commented Apr 23, 2015 at 5:23 — harrini
– harrini, Commented Apr 23, 2015 at 5:23

Anand G · Accepted Answer · 2015-04-17 08:55:48Z

1

I assume you have included jQyery

       $.noConflict();
       jQuery(function() {
           jQuery('.packery').on('click',function(){
              jQuery(this).remove();
           });
       });

Fiddle

edited Apr 17, 2015 at 8:55

answered Apr 17, 2015 at 8:49

Anand G

3,2102 gold badges24 silver badges30 bronze badges

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

3 Comments

harrini Over a year ago

thanks for the reply, but i m getting an error like $ is not defined. how to make use of this code in angular.. $( function() { var packery = $('.packery').packery(); console.log(packery); packery.on( 'click', function( event ) { // remove clicked element packery.packery( 'remove', event.target ); }); });

Anand G Over a year ago

This why I said, did you included jQuery in document head. also check if $ is not used. I am editing my answer

Arkantos Over a year ago

You need to add jQuery library specifying the path of the source, something like this <script src="//code.jquery.com/jquery-1.9.1.min.js"></script>. This will download the file from jquery's cdn but you can give the local path in your project

Stephan Ahlf · Accepted Answer · 2015-04-17 08:43:00Z

1

For a simple click event you need ng-click within your template described at https://docs.angularjs.org/api/ng/directive/ngClick

No need for jQuery in this case

answered Apr 17, 2015 at 8:43

Stephan Ahlf

3,5076 gold badges43 silver badges72 bronze badges

Comments

FlashyFuddyFuddy · Accepted Answer · 2015-04-17 11:53:02Z

0

If you want to simply remove the clicked element, use this:

Your HTML:

<div class="packery">
   <div class="item" data-ng-click="remove($event)"></div>
   <div class="item h4" data-ng-click="remove($event)"></div>
   .......
</div>

Your Controller:

function myController( $scope ){
   $scope.remove=function($event){ 
       $event.target.remove();    
  }       
}

Check our the Fiddle example.

answered Apr 17, 2015 at 11:53

FlashyFuddyFuddy

3032 gold badges4 silver badges20 bronze badges

Comments

Trevor · Accepted Answer · 2015-04-23 17:32:23Z

0

This is a good use case for an Angular directive. You can use an html attribute to specify which element the jQuery plugin should be applied to:

angular.module("mymod")
.directive("packery", function(){
  return {
    link: function(scope, element, attrs) {
      $('[packery]').packery().on('click', function(event){
        $(element).packery('remove', event.target);
      });
    }
  }
});

Then, whenever you want this jQuery plugin to be applied to an element, you simply give that element the packery attribute:

<div packery>...</div>

answered Apr 23, 2015 at 17:32

Trevor

13.5k13 gold badges82 silver badges105 bronze badges

Collectives™ on Stack Overflow

using jquery in angularjs?

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related