Class: layertreeDirective directive:ngeoLayertree

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