Question

Angular provides the instance element of the current scope within a link function.

The iElement angular passes is capable of doing things beyond a standard HTML element. How does angular do this? Wrap it with jQuery first?

How does the link element in this angular-ui tinymce implementation get the tinymce method e.g. the method shown below on line 49:

elm.tinymce();

I get that the ui-tinymce attribute links to the directive named uiTinymce, and that tinymce is included in the main html, but i don’t understand how elm get the method tinymce.

As a reference I’ve provided the relevant documentation on iElement from http://docs.angularjs.org/guide/directive below.

Linking function:

function link(scope, iElement, iAttrs, controller) { ... }

The link function is responsible for registering DOM listeners as well as updating the DOM. > It is executed after the template has been cloned. This is where most of the directive logic > will be put.

scope – Scope – The scope to be used by the directive for registering watches.

iElement – instance element – The element where the directive is to be used. It is safe to manipulate the children of the element only in postLink function since the children have already been linked.

Answer 1

From the angular.element page:

Note: All element references in Angular are always wrapped with jQuery
or jqLite; they are never raw DOM references.

So yes, the iElement argument is a jQueryLite, or full jQuery object, which has all of the relevant additional methods that jQuery/jQueryLite provide.

This includes any additional methods that are added via jQuery’s plugin mechanisms, which have the effect of being able to call those methods directly on the jQuery object itself.

So the TinyMCE JS file would have code to add in a .tinymce() function to all jQuery objects, which is how the iElement object has it.

Does that make sense?