Servoy default components in ng-client provide functionality for it's properties via directives applied to the component template.It is known that some properties are design time only properties and some properties are also runtime properties and thus the implementation of a design time property is different than a runtime property. The design time directive only applies the property once at initialization and it's job is done .The runtime directives 'watches' (via angular $watch()) any property change coming from the server and updates the component.

These directives were created with webclient behavior in mind and implementation can change  since servoy 8 is alpha.

The directives provided are:

svy-autoapply is a core directive which requires angular's 'ng-model' directive alongside it.It's responability is to listen for any change (html 'change' event) from the input element applied to  and sends the changes to the corresponding property on the server.

svy-enter (Design, domevent:'keydown') this directive triggers the given function  when the enter key is pressed in a text input field. It does supply an $event parameter.

svy-enter='handlers.onActionMethodID($event)'

svy-click (Design, domevent:'click') this directive triggers the given function when a mouse click is done. It does supply an $event parameter. 

svy-click='handlers.onActionMethodID($event)'

svy-dblclick (Design, domevent:'dblclick') this directive triggers the given function when a double click happens, It does supply an $event parameter.

svy-dblclick='handlers.onDoubleClickMethodID($event)'

svy-rightclick (Design, domevent:'contextmenu') this directive triggers the given function when a right click happens. It does supply an $event parameter.

svy-rightclick='handlers.onRightClickMethodID($event)'

svy-focusgained (Design, domevent:'focus') this directive triggers the given function when the element receives focus. It does supply an $event parameter.

svy-focusgained='handlers.onFocusGainedMethodID($event)'

svy-focuslost (Design, domevent:'blur') this directive triggers the given function when the element looses focus. It does supply an $event parameter.

svy-focuslost='handlers.onFocusLostMethodID($event)'

svy-background (Runtime | accepts 'color' property type from spec as the model attribute value)  sets the 'background-color' style of the element being applied  to.It also watches the property values and updates the compoent if the compoent is updated on the server (being a runtume ) . Background color is dependend on the trasparency flag in servoy and it only applies the background color if the trasparency flag is not set .It's usage in ngClient components is:

svy-background='model.transparent ? "transparent" : model.background'

svy-foreground (Runtime | color) - same as svy-background but for 'color' css property and independent of trasparent property.

svy-foreground='model.foreground'

svy-scrollbars (Design | scrollbars) - sets provided scrollbars on the html element being applied to

 svy-scrollbars='model.scrollbars'

svy-font (Runtime | font) - sets provided font on the html element being applied to

       svy-font='model.fontType'

svy-margin(Design | dimension) - sets provided magin as css padding on the html element being applied to

 svy-margin='model.margin'

svy-border (Runtime | border) - sets provided border css on the html element being applied to

 svy-border='model.borderType' 

svy-tooltip (Runtime | tagstring) - sets the tooltip text  (TODO change to $watch() because of tagstring)

svy-tooltip='model.toolTipText'

svy-textrotation(Design | {type:'int', values:[0,90,180,270]} ) applies css 'transform:rotate(<X>deg);' to the element and swaps height and width. So it rotates only the contents of the element

svy-textrotation ='model.textRotation'

svy-selectonenter(Design | boolean ) - if true will select text when field gets focus 

svy-selectonenter ='model.selectOnEnter'

svy-rollovercursor(Design | int ) - value 12 means hand rollover cursor (css pointer)

svy-rollovercursor='model.rolloverCursor'

svy-imagemediaid(Runtime | media )

svy-imagemediaid='model.imageMediaID'

svy-mnemonic(Design | string) - sets the 'accesskey' html attribute value

svy-mnemonic='model.mnemonic'

svy-tabseq(Runtime | tabseq) - a nice way to control client side tabIndexes. See svy-tabseq page for more info.

 svy-tabseq='model.tabSeq'

svy-format(Runtime | {for:'dataProviderID' , type:'format'}) - requires to be placed on input fields with an ng-model . Registers parsers and forrmatters for ng-model controller to parse and format based on the provided servoy format;

svy-format="model.format"

svy-component-wrapper(Design | web component) - can be used to easily integrate a child component directive based on a 'component' type property value. For more information see Component (child) property type.

<svy-component-wrapper component-property-value="model.childComponent2"></svy-component-wrapper>
    or
<svy-component-wrapper
     tagname="model.childComponent1.componentDirectiveName"
     name="model.childComponent1.name"
     svy-model="model.childComponent1.model"
     svy-api="model.childComponent1.api"
     svy-handlers="model.childComponent1.handlers"
     svy-apply="model.childComponent1.apply"
     svy-servoyApi="model.childComponent1.servoyApi">
</svy-component-wrapper>

Besides these directives there are also some angular filters:

mnemonicletterFilter  - should be applied to an expression bound to an 'ng-bind-html' to underline the first letter coresponding to the filter  parameter parameter  example :

ng-bind-html='model.myStringProperty | mnemonicletterFilter:model.mnemonicProp'

formatFilter- formats the given expression result with the corresponding  servoy format property(it is used when you don't need editing support , for example labels, buttons)

ng-bind='model.myStringProperty | formatFilter:model.formatProp'

Model values

Servoy provides a unique css id called svyMarkupId in the model object which can be used by the component to set its main css id to a page unique value.