ment-io | Mentions and Macros for Angular-js

ment-io angular directive


Stars : 10

Forks : 10

Created by Jeff Collins

bower install

Demo Download GitHub

The ment-io angular directive is applied to any element that accepts selectable text input and exposes an ngModel. The mentio directive watches the ngModel of the element for changes. If the user enters a sequence of non-wihtespace characters starting with a trigger character, a typeahead menu appears.

For the mentio directive, specification of options can either be done inline, within the same element for one triggering character, or using a series of configurations if there are a multiple applicable triggering characters.
When detecting user input that should show a typeahead menu, the following rules apply:

A specified trigger character is present in the text preceding the current caret location (e.g. @)
A space precedes the trigger character
The text following the trigger character contains no spaces up to the current caret location
When a match is found, the current text after the trigger character is assigned to the scope property specified in the mentio-typed-term attribute if present. It is only possible for one trigger character to cause a menu to show at a time. Also, only one menu will display on a given page at a time.
Definition of menu behavior for each desired trigger character can be specified with separate mentio-menu directives. However the mentio directive does not require separate mentio-menu directives. If only one trigger character is needed, the mentio-trigger-char, mentio-items, mentio-template-url, mentio-search, and mentio-select attributes from the mentio-menu directive can be specified directly along side the mentio directive.

To support macro expansion, a translation table to use for macros can be assigned through the macros attribute which will expand typed sequences of characters into predefined strings of HTML or text.

$scope.macros = {
'brb': 'Be right back',
'omw': 'On my way',
'(smile)' : '<img src=""' +
' height="20" width="20">'


Javascript plugin