0

I need to handle a click on a tag that enables the opening of a popover.

I try to figure out the best way to do this with angularjs and naturally used hg-click.

<div ng-repeat="photo in stage.photos" 
ng-click="openPopoverImageViewer($(this))"
>

$scope.openPopoverImageViewer = function  (source) {
alert("openPopoverImageViewer "+source);
}

The issue is that I cannot manage to pass the $(this) to it.

  1. Q1) How to pass the jQuery element?

  2. Q2) In addition, ng-click sounds to require the function being part of the controller: is it possible to invoke a function in the partial instead?

Stéphane de Luca
  • 12,745
  • 9
  • 57
  • 95

2 Answers2

1

Pass it "photo"

<div ng-repeat="photo in stage.photos"  ng-click="openPopoverImageViewer(photo)">

or the current $index

<div ng-repeat="photo in stage.photos"  ng-click="openPopoverImageViewer($index)">
oori
  • 5,533
  • 1
  • 30
  • 37
1

You need to stop "thinking in jQuery" :) Like @oori says, you can pass in photo. Or better yet, create a custom directive. Directives is the way to go when you need new functionality in your dom, like an element that you can click to open an overlay. For example:

app.directive('popOver', function() {
  return {
    restrict: 'AE',
    transclude: true,
    templateUrl: 'popOverTemplate.html',
    link: function (scope) {
      scope.openOverlay = function () {
        alert("Open overlay image!");
      }
    }
  };
});

You can then use this as a custom elemen <pop-over> or as an attribute on regular HTML elements. Here is a plunker to demonstrate:

http://plnkr.co/edit/P1evI7xSMGb1f7aunh3G?p=preview

Update: Just to explain transclusion: When you say that the directive should allow transclusion (transclude:true), you say that the contents of the tag should be sent on to the directive.

So, say you write <pop-over><span>This will be passed on</span></pop-over>, then the span with "This will be passed on" is sent to the directive, and inserted wherever you put your ng-transclude element in your template. So if your pop-over template looks something like this:

<div>
    <ng-transclude/>
</div>

Then your resulting DOM after the template has compiled will look like this:

<div>
     <span>This will be passed on</span>
</div>
Kjell Ivar
  • 1,154
  • 8
  • 8
  • You're totally right, I need to stop thinking jQuery and it's what I'm trying to do, in the process of learning angularjs. It takes time as I use it for the first time for an actual multi platform project. (A bit stressing actually :-) ) Your example is really helpful to me. What's transclusion? – Stéphane de Luca Apr 25 '14 at 07:25
  • Yes, there's a bit of a learning-curve to angularjs, and especially directives can be a bit hard to wrap your head around at first. But I'm finding that I can't get enough of angular now :) I updated my answer and added a bit on transclusion. I also recommend reading the answer to this question: http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background, I thought it was pretty helpful. – Kjell Ivar Apr 25 '14 at 10:04
  • I have implemented the directive: though it works well when I add the directive in the template, the attributes are removed when I inject the HTML from the controller model via a
    directive. Is there a way to do it?     – Stéphane de Luca Apr 25 '14 at 11:03
  • Directives can get their own local scope, and this can confuse things. But I'm not entirely sure what you mean, could you perhaps update your original questions with some details, or post a new question? :) – Kjell Ivar Apr 25 '14 at 11:57
  • Ok, I created a new question here, hope it's clearer http://stackoverflow.com/questions/23293620/angularjs-how-to-handle-a-popup-with-a-directive-so-that-data-comes-from-contro – Stéphane de Luca Apr 25 '14 at 12:48