$compile returning scope instead of current element refrence

Question

$scope.retryTask = function(e) {
        console.log(e);
    };

$("#showloader").replaceWith(
                    $compile(
                    "<span class='iconexclaim'><img src='images/backupiconexclaim.jpg' /></span><span class='retry-btn' ng-click='retryTask(this)'>Retry</span>"
            )($scope)
);

The value of e is getting unexpectedly scope of controller not the image jquery object on which I'm clicking. );

so, where is problem? why you use jquery inside angular this way? what problem you try solve? — Grundy, May 18 '15 at 11:04
I want the current refrence of element on which I'm clicking. — Sunil Madan, May 18 '15 at 11:07
http://stackoverflow.com/questions/23107613/angularjs-get-original-element-from-ng-click use $event.currentTarget, but using angular and jquery this way seems strange — Petr Averyanov, May 18 '15 at 11:09
@user3806762 but why? in most cases you not need work with dom element directly in angular — Grundy, May 18 '15 at 11:10
if you would not use `$complie` - then inside click handle - passed html element — Grundy, May 18 '15 at 11:19

score 1 · Answer 1 · edited May 23 '17 at 12:05

I'm answering your specific question, BUT continue reading, because this is not how one should approach creating Angular apps.

To get the DOM element you need to pass the $event local variable that Angular creates for you:

<span class='retry-btn' ng-click='retryTask($event)'>Retry</span>

Then, you could get the element with $event.currentTarget:

$scope.retryTask($event){
   var target = $event.currentTarget;
}

longer version

You are not "thinking in Angular", so, please read the following SO question/answer first: "Thinking in AngularJS" if I have a jQuery background?"

In a nutshell, forget about DOM inside controllers and only work with your ViewModel.

In your case, you have a simple loader that needs to appear when something is loading. So represent that with $scope.isLoading variable and set it to true/false when a task is running or complete. Then, your view can react accordingly (with ng-show/ng-hide or ng-if):

.controller("MainCtrl", function($scope, SomeSvc){
  // do some async task right away
  doTask();

  $scope.retryTask = function(){
    doTask();
  };

  function doTask(){
    // before start, set to true
    $scope.isLoading = true;
    SomeSvc.doTask()
           .then(function(data){
              $scope.data = data; // if needed
           })
           .finally(function(){
              // when finished, set to false
              $scope.isLoading = false;
           });
  }
})

And let the View be "driven" by the ViewModel:

<div ng-show="isLoading">loading...</div>
<div ng-hide="isLoading">
   {{data}}
</div>

$compile returning scope instead of current element refrence

1 Answers1