Framework: Directives

Accessing Directives

Directives are always part of a ComponentModel. On a component you can access the directives through the directives property which is a DirectiveColletion.

// get hold of a specific directive
const textDirective = componentModel.directives.get('title')

// loop through all directives on a component in the order
// they are defined.
for (const directive in componentModel.directives) {

// loop through each image directive on a component
componentModel.directives.eachImage((imageDirective) => {

// Get the number of directives of a certain type
// on a component.
// Possible types: 'editable', 'image', 'html', 'link', 'include'
const count = componentModel.directives.count('include')

Directive Types


type: ‘editable’ component template attribute: doc-editable

textDirective.setContent('Lorem Ipsum dolorem...')
const content = textDirective.getContent()


type: ‘image’ component template attribute: doc-image

Minimal Example:

imageDirective.setContent({url: ''})

Most of the time you will want to have optimized delivery with an image service. For this width, height, mimeType as well as the imageService itself have to be specified when setting an url.

Real World Example with image service:

  url: '',
  width: 400,
  height: 300,
  mimeType: 'image/jpeg',
  imageService: '',
  crop: {x: 100, y: 50, width: 200, height: 200},
  origins: [{name: 'uez463x8ie39', identifier: 'hugo'}]

// Update the crop
imageDirective.setCrop({x: 0, y: 0, width: 250, height: 250})


type: ‘html’ component template attribute: doc-html

  html: '<div>Moby Dick</div>'

type: ‘link’ component template attribute: doc-link

  href: '',
  target: '_blank'

Allowed values for target: ‘_blank’, ‘_self’, ‘_parent’ or ‘_top’


type: ‘include’ component template attribute: doc-include

  service: 'list',
  params: {foo: 'bar'}

// Retrieve the params set on a directive (this includes defaultParams
// specified in the component configuration if they have not been overwritten).

// setParams overwrites all parameters of this include.
includeDirective.setParams({foo: 'bar'})

// addParams merges the specified params with the existing ones
// (including any default params that may have been set in the component
// configuration).
includeDirective.addParams({foo: 'bar'})



Whenever a directive is changed a componentContentChanged event is fired on the componentTree the componentModel is attached to. If the componentModel the directive belongs to is not attached to a componentTree no event is fired.