jQuery Lite Element Finder with Ng-If on Angular Directive

Question

I have a directive with two html elements, one is an ng-if directive and the other is not:

  <div>
     <div ng-if="true" id="ngIfTest">TEST WITH NG-IF</div>
  </div>

  <div>
     <div id="withoutNgIfTest">TEST WITHOUT NG-IF</div>
  </div>

I select the elements like so:

var ngIfElement = angular.element(elem[0].querySelector('#ngIfTest'));
var noNgIfElement = angular.element(elem[0].querySelector('#withoutNgIfTest'));

I am able to select the element that does not use ng-if, but not the one that does.

LIVE EXAMPLE HERE (Click on the text to see it selecting one properly)

var myApp = angular.module('myApp',[]);

myApp.directive('myDirective', function() {
    return {
        link: function(scope,elem) {
        
            //var myDivElement = elem #myDiv;
                var myDivElement = angular.element(elem[0].querySelector('.myDiv'));
        
                elem.bind('click', function() {
                    elem.css('background-color','red');
                    myDivElement.css('color','blue');
                    console.log('Element clicked');
                    scope.$apply(function() {
                        scope.color = "red";
                    });
                });
                
        }
    }
});


function MyCtrl($scope) {    
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-controller="MyCtrl">
    <div id="me" style= "background-color:yellow;" my-directive>
          <div id="myDiv" class="myDiv">TEST</div>
    </div>
</div>

I realize that this has to do with ng-if creating its own scope, but I am not sure how to get around it.

Related question that I am drawing from: AngularJS: How to .find using jqLite?

Note that your jsFiddle (and therefore the imported snippet) does not include the `ngIf` directive... — Heretic Monkey, Jun 06 '16 at 18:53

score 6 · Accepted Answer · answered Jun 06 '16 at 18:34

6

It's not really an issue of creating it's own scope, it's because ngIf doesn't write to the DOM when the condition isn't satisfied, so your jQuery selector never finds it. Use ngShow and ngHide if you need the element to exist in the DOM and be queryable.

answered Jun 06 '16 at 18:34

tymeJV

103,943
14
161
157

Seems logical enough, upvoted. Will come back to accept in couple of days. – VSO Jun 06 '16 at 18:47

jQuery Lite Element Finder with Ng-If on Angular Directive

1 Answers1