new directive_(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 |
Object | One theme (JSON). |
ngeo-layertree-templateurl |
string | The template URL. |
ngeo-layertree-map |
ol.Map | The map. |
ngeo-layertree-nodelayer |
string | 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 |
string | Expression that will be parsed
to be a ngeo-layertree-nodelayer . |
ngeo-layertree-listeners |
string | Expression that will be parsed
to be a Function with the argument:
{
'treeScope': !angular.Scope ,
'treeCtrl': ngeo.layertree.Controller
} |
ngeo-layertree-listenersexpr |
string | Expression that will be parsed
to be a ngeo-layertree-listeners . |
Returns:
The Directive Definition Object.