The
iElement or
tElement passed to the directive’s link and compile functions are wrapped references to the native DOM element. The elements are inside an Angular-native wrapper called
jqLite. You can create everything in Angular using this API alone which has a subset of jQuery. If you need direct access to the raw DOM element you can get it by accessing the first element of the object with element[0].
compile:
compile: function compile(tElement, tAttrs, transclude) {
return {
pre: function preLink(scope, iElement, iAttrs, controller) {...
},
post: function postLink(scope, iElement, iAttrs, controller) {...
}
}
}link:
link: function postLink(scope, iElement, iAttrs) { ... }Supported APIs in the Angular docs for angular.element() — the function you’d use to create jqLite-wrapped DOM elements.
The most useful core functions from jQuery.
addClass(),
bind(),
find(),
toggleClass(), and so on.
In addition to the jQuery APIs, elements also have Angular-specific functions. These exist whether or not you’re using the full jQuery library.
Function Description
| Method | Description |
|---|
controller(name) | When you need to communicate directly with a controller, this function returns the controller attached to the element. If none exists for this element, it walks up the DOM and finds the nearest parent controller instead. The name parameter is optional and is used to specify the name of another directive on this same element. If provided, it will return the controller from that directive. The name should be in the camel-case format as with all directives. That is, ngModel instead of ng-model. |
injector() | Gets the injector for the current element or its parent. This allows you to ask for dependencies defined for the modules in these elements. |
scope() | Returns the scope of the current element or its nearest parent. |
inheritedData() | It sets and gets data on an element(similar to jQuery function data()). In addition to getting data from the current element, it will also walk up the DOM to find a value. |
As an example, let’s create an expander example without the help of
ng-show and
ng-click.
angular.module('expanderModule', [])
.directive('expander', function() {
return {
restrict: 'EA',
replace: true,
transclude: true,
scope: {
title: '=expanderTitle'
},
template: '<div>' +
'<div class="title">{{title}}</div>' +
'<div class="body closed" ng-transclude></div>' +
'</div>',
link: function(scope, element, attrs) {
var titleElement = angular.element(element.children().eq(0));
var bodyElement = angular.element(element.children().eq(1));
titleElement.bind('click', toggle);
function toggle() {
bodyElement.toggleClass('closed');
}
}
}
});The
ng-click and
ng-show directives are removed from the template. When users click on the expander title, we’ll create a jqLite element from the title element and bind the click event to it with a toggle() function as its callback. In
toggle(), we’ll call
toggleClass() on the expander body element to add or remove a class called closed, where we’d set the element to display: none with a class like this:
.closed {
display: none;
}
