Zengine provides several directives for you to use in your plugin html.
zn-inline-filter directive allows you to insert a data filter builder directly into your plugin page. This is different from the znFiltersPanel service, which opens the filter builder in a modal. The filter returned can be used to query records, save to a data view, and build and run calculations.
The directive has 2 required parameters:
zn-inline-filter is an object matching the options of the znFiltersPanel, excluding
ng-model should represent the
$scope property for the filter.
This directive solves both issues. You can use the directive on an element with model that’s a string type, and put a bootstrap datepicker (and optionally a timepicker) as children of the directive element. Then, changes in the directive model are reflected in the picker(s), and vice versa.
A few things to note:
sync-timewith a value that evaluates to true.
In addition, the directive provides the following useful scope properties:
format- the preferred user date format, which can be passed on as the display format of the datepicker
open- a function for opening the datepicker popup
opened- a boolean state of whether the datepicker popup is open or not
user- the entire User object.
dateOptions- a set of default datepicker settings used for all datepickers within the app.
ui-draggable directive is an AngularJS wrapper for jQuery UI draggable.
All the jQuery UI draggable options can be defined in your controller.
Apply the directive to your elements:
validate directive works in conjunction with the Angular form directive to add an
error class to the element when it has any invalid child inputs. The directive only checks for invalid inputs when
formName.submitted is true. An input is considered invalid if
inputName.$valid is false. In the example below, after clicking , this directive will add an
error class to the control-group div if
myFormInput is invalid. In this case, the validity of
myFormInput will depend on the
required directives. Check out the Angular docs for more info on input validation.