JavaScript Centered Angular Directives

In the last [example angular directive, the focus was rendering data into html elements. In that case, there was a minimum of javascript in the link function.

However, it is often useful to wrap functionality provided by a javascript library into a directive, so that the behavior can be controlled by angular.

The simplest form of angular directive is the single element replace, which follows the emerging web component pattern. Here is an example map component using mapbox.js.

In this way, the following html:

<map></map>

Can become:

By passing a latitude and longitude to the directive, the map can be centered at a specific locations.

For example, a map of Juneau, Alaska:

Is as easy as:

<map location="{ zoom:9, lat: 58.3, lng: -134.4 }"></map>