angular.element() - Different context reference using jQLite or jQuery

[Thibaut De Muynck]

As a noob I'm just beginning to learn Angularjs. In my course of experiment I ran into a surprising fact:

Using angular.element() doesn't always return the same result wether the jQuery library is loaded or not. This might become annoying at a point where code developed without the jQuery library loaded would become unusable when you later include it.

Here is an example code that illustrates this situation:

I have a directive like:

angular.module('myModule', [])

  .directive('listHead', function() {

// transform <th> element with sort and search options

return {

restrict: 'C',

transclude: true,

scope: { name: '@name' },

template:

'<th>'+

'<span class="dbl-head-title" ng-transclude></span>'+

'<span class="dbl-head-icons"><i class="icon-resize-vertical dim3"></i><i class="icon-search dim3"></i></span>'+

'<span class="dbl-head-search"><input class="input-thin" id="filter_{{name}}" type="text"></span>'+

'</th>',

link: function(scope, element, attrs)

{

// identify target elements

console.log(angular.element(element).children());

}

};

});

Then a partial containing a portion of code like:

...

...

<tr>

<th class="listHead" name="firstname">First Name</th>

<th class="listHead" name="lastname">Last Name</th>

<th class="listHead" name="company">Company</th>

<th class="listHead" name="email">E-mail</th>

</tr>

...

...

When running this without the jQuery library loaded (i.e.: using jQLite) the console will output something like:

[span.dbl-head-title, span.dbl-head-icons, span.dbl-head-search, ready: function, toString: function, eq: function, push: function, sort: function…]directives.js:50

[span.dbl-head-title, span.dbl-head-icons, span.dbl-head-search, ready: function, toString: function, eq: function, push: function, sort: function…]directives.js:50

[span.dbl-head-title, span.dbl-head-icons, span.dbl-head-search, ready: function, toString: function, eq: function, push: function, sort: function…]directives.js:50

[span.dbl-head-title, span.dbl-head-icons, span.dbl-head-search, ready: function, toString: function, eq: function, push: function, sort: function…]directives.js:50

Now running the same code with the jQuery library loaded, the console will output:

[th, prevObject: v.fn.v.init[1], context: th.listHead ng-isolate-scope ng-scope, selector: ".children()", constructor: function, init: function…]directives.js:50

[th, prevObject: v.fn.v.init[1], context: th.listHead ng-isolate-scope ng-scope, selector: ".children()", constructor: function, init: function…]directives.js:50

[th, prevObject: v.fn.v.init[1], context: th.listHead ng-isolate-scope ng-scope, selector: ".children()", constructor: function, init: function…]directives.js:50

[th, prevObject: v.fn.v.init[1], context: th.listHead ng-isolate-scope ng-scope, selector: ".children()", constructor: function, init: function…]directives.js:50

Without jQuery loaded, you'll get the list of children, as expected. But whenever the jQuery library is loaded you'll get a reference to the parent object.

To circumvent this situation I currently fell back to using:

angular.element(element).find('span.class');

Instead of .children()

As far as I can comprehend with my little knowledge it seems the "context" of the request is different with or without the jQuery library loaded.

Am I right or wrong ?

Is there a way to change this (context) ?

My point is: how can I make sure that all the code I write without the jQuery library loaded will work if I ever need to upgrade my app using the jQuery library ?

Hope someone can help me with this, thanks in advance !

Thibaut

[Peter Bacon Darwin]

The actual problem if you look at the elements that are generated is that the jquery one is creating <th><th>, i.e. nesting a new th inside the original one.

Thibaut

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
 
 

[Thibaut De Muynck]

That's right !

Thank you Peter, you were so quick to figure that out... I wich I someday reach your level of comprehension ;-)