Class: layertreeDirective directive:ngeoLayertree

ngeo.layertreeDirective

new layertreeDirective($compile, ngeoLayertreeTemplateUrl)

Provides the "ngeoLayertree" directive, a directive for creating layer trees in application.

The directive assumes that tree nodes that are not leaves have a "children" property referencing an array of child nodes.

Example:

 <div ngeo-layertree="ctrl.tree"
   ngeo-layertree-map="ctrl.map"
   ngeo-layertree-nodelayer="ctrl.getLayer(node)"
   ngeo-layertree-listeners="ctrl.listeners(treeScope, treeCtrl)">
 </div>

The "ngeo-layertree", "ngeo-layertree-map" and "ngeo-layertree-nodelayer" attributes are mandatory attributes.

  • "ngeo-layertree" specifies an expression providing the tree. The directive watches that expression, making it possible to retrieve the tree data through Ajax.

  • "ngeo-layertree-map" specifies an expression providing the OpenLayers map. The directive doesn't watch that expression.

  • The "ngeo-layertree-nodelayer" specifies an expression providing the layer for a given node. In most cases that expression will be function call with "node" as the argument to the function call. E.g. "ngeo-layertree-nodelayer="ctrl.getLayer(node)".

  • The "ngeo-layertree-listeners" specifies an expression providing a function to bind scope events to customs functions. You'll must set the listener on the "treeScope" and probably use "treeCtrl" as context. E.g. "ngeo-layertree-listeners="ctrl.listeners(treeScope, treeCtrl)".

The directive comes with a default template. That template assumes that tree nodes that are not leaves have a "children" property referencing an array of child nodes. It also assumes that nodes have a "name" property.

By default the directive uses "layertree.html" as its templateUrl. This can be changed by redefining the "ngeoLayertreeTemplateUrl" value (using app.module.value('ngeoLayertreeTemplateUrl', 'path/layertree.html'), or by adding an "ngeo-layertree-templateurl" attribute to the element.

Example:

 <div ngeo-layertree="ctrl.tree"
   ngeo-layertree-templateurl="path/to/layertree.html"
   ngeo-layertree-map="ctrl.map"
   ngeo-layertree-nodelayer="ctrl.getLayer(node)"
   ngeo-layertree-listeners="ctrl.listeners(treeScope, treeCtrl)"
 </div>

The directive has its own scope, but it is not an isolate scope. That scope has a "layertreeCtrl" property which is a reference to the directive's controller: "layertreeCtrl". You can refer to that property in a custom template for example.

See our live example: ../examples/layertree.html

HTML attributes:
Name Type Description
ngeo-layertree One theme (JSON).
ngeo-layertree-templateurl The template URL.
ngeo-layertree-map The map.
ngeo-layertree-nodelayer Expression that will be parsed to be a Function that return a ol.layer.Layer with the argument: { 'node': Object|undefined, 'depth': number }
ngeo-layertree-nodelayerexpr Expression that will be parsed to be a ngeo-layertree-nodelayer.
ngeo-layertree-listeners Expression that will be parsed to be a Function with the argument: { 'treeScope': !angular.Scope, 'treeCtrl': ngeo.LayertreeController }
ngeo-layertree-listenersexpr Expression that will be parsed to be a ngeo-layertree-listeners.
Returns:
angular.Directive

The Directive Definition Object.