Angular ng-repeat, Jquery fail

Question

So I am using ng-repeat to repeat some divs which show images out of my JSON file. What I want to do is that when I click on that image (whether its desktop or mobile) the image will scale. Now my problem is that when I want to create a click event on my image tag (which is inside that div that holds the ng-repeat), he doesn't do anything. He cant see the click.

I red something on the internet about issues with jquery and angular, but for me as a beginner its hard to understand what I have to do to make it work how I pleased. I just want to be able to put a jquery function on a image tag inside the ng-repeated divs, so I can manipulate the css from there.

I have a piece of the code posted below here, maybe I have to add something to my controller? I dont know, I am clueless at the moment. :-)

<section class="words">
    <div class="colored-sidebar"></div>
    <!-- content -->
    <div class="previous-button"></div>
    <div class="word-container" ng-controller="imageController as imageCtrl">
      <h1><span>noun</span>words</h1>
      <div class="category-body">
        <p><span>noun</span>travel</p><hr>
        <div class="category-section" ng-repeat="icon in imageCtrl.imageList.travel">
          <!-- <div class="category-image" ng-include="icon.src"></div> -->
          <div class="category-image">
            <img src="{{icon.src}}" />
          </div>
        </div>
      </div>
  </section>

The angular file

    (function() {
    app.controller('imageController', function(){

     this.imageList = imageJson;

    });
        var imageJson = {
          //ALOT OF JSON DATA HERE//
        };
})();

I hope this piece of code would be enough to help me :-)

Any tips are welcome, I love to learn this language better and also understand it better.

Thanks!

I marked it as duplicate but in fact i meant you should use ng-click to bind event, not jQuery — A. Wolff, Jan 20 '15 at 11:40
I reopened the question finally, hope an angular guy will help you more than i can — A. Wolff, Jan 20 '15 at 11:42
Thanks for the input! I will take a look at the ng-click. :-) — Tbmluijten, Jan 20 '15 at 11:44

score 1 · Answer 1 · answered Jan 20 '15 at 12:11

jQuery is not suitable here, because by the time you run your jQuery code inside jQuery.ready(), the elements in "category-image" class are not created yet.

For solution of your problem you can use two methods:

1) Use the "ng-click", as proposed before. You can also pass "$index" to function inside ng-click. This way you will know index of icon in imageList.travel that was clicked. But this way you will have no information about dom element.

2) Create a directive. The main difference between directives and controllers is that directive have information about dom object. You can treat element as typical jQuery object

JS:

   app.directive('imageClick', [function () {
        return {
            link: function (scope, element, attr) {

               element.on("click", function(e){
                  //do some stuff here
               })
            }
        }
   }]);

HTML

<section class="words">
    <div class="colored-sidebar"></div>
    <!-- content -->
    <div class="previous-button"></div>
    <div class="word-container" ng-controller="imageController as imageCtrl">
      <h1><span>noun</span>words</h1>
      <div class="category-body">
        <p><span>noun</span>travel</p><hr>
        <div class="category-section" ng-repeat="icon in imageCtrl.imageList.travel">
          <!-- <div class="category-image" ng-include="icon.src"></div> -->
          <div class="category-image">
            <img image-click src="{{icon.src}}" />
          </div>
        </div>
      </div>
  </section>

Angular ng-repeat, Jquery fail

1 Answers1