To get started, use

bower install ment.io --save
                or
                



                
npm install ment.io --save
                
Then add 'mentio' to your app’s module dependency list.

                
Directives
                

                    
                    mentio
                    
                

                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.
                

                
Attributes

                
ng-model
                Required. An ngModel is required on the element for mentio to be able to operate.

                
mentio-id
                Optional. An angular expression representing the ID of the mentio element.  This value
                is matched by the mentio-for attribute on any separate mentio-menu elements.  
                If no mentio-id is specified, the id
                html attribute will be used to match mentio-for.  The mentio-id is unnecessary if there
                is only one trigger character and all attributes are specified on the mentio directive.

                
mentio-typed-term
                Optional. If specified, binds a scope property that will be assigned
                the current value of the typed term when the mentio menu is active.

                
mentio-macros
                Optional. Specifies a JSON map of macro translations.  The key should be a simple sequence of characters, not including spaces.  The key
                will be matched case-insensitive.  When a match is detected, the value in the macro table will be expanded in place of the
                macro the user typed.
                

                An example from the sample demo in scripts.js:
                

                
                    $scope.macros = {
                        'brb': 'Be right back',
                        'omw': 'On my way',
                        '(smile)' : '<img src="http://a248.e.akamai.net/assets.github.com/images/icons/emoji/smile.png"' +
                                ' height="20" width="20">'
                    };

                
mentio-require-leading-space
                Optional. When true, specifies that the menu will only be displayed if the trigger character is 
                preceded by a space.  This option can benefit the user by 
                disambiguating typeahead text from other text that might normally
                contain the configured trigger character, but for some languages like Chinese, spaces cannot be required.
                

 
                
mentio-iframe-element
                Optional. Specifies an iframe DOM element within which the ment.io menu will be shown.
                This is useful for situations where the actual control is a textarea, but the editor is 
                presented in an iframe, like TinyMCE.
                


                
mentio-select-not-found
                Optional. Will run the mentio-select function passing a the typedText scope variable in the label property of a JSON object when the typedText will become empty (after a space was typed, for instance).  This is useful for creating new items dynamically even if they do not exist in your backend service yet (e.g. tags).
                


                 
Provided Scope Properties

                
typedTerm
                The typedTerm scope property is bound to the text currently after the trigger char.  
                This can be referenced from within the
                mentio-menu template to highlight text when presenting menu items.

                

 
                Special note for contenteditable: To see the ment.io directive operate in a contenteditable, 
                you must have set up the contenteditable to update the ngModel as per the AngularJS examples here:
                
                https://docs.angularjs.org/api/ng/type/ngModel.NgModelController.  The approach of creating a custom
                contenteditable directive is demonstrated in the ment.io demo code.

                
mentio-trigger-char, mentio-items, mentio-template-url, mentio-search,
                mentio-select 
                Optional. If only one trigger char is needed, these attribtues can be used on the mentio
                directive.  See the description of these attributes in mentio-menu below for details. 

                

                    
                    mentio-menu
                    
                
                
The mentio-menu element defines a menu for each a trigger
                character that the mentio directive
                should respond to.  The mentio-menu identifies which mentio directive it is targeting
                by referring to the element id of the element containing the mentio directive.
                
                
Each menu must specify the trigger character, a data collection,
                the template to use to render the menu, a search
                function, and a select function.  Based on the specified attributes,
                the specified menu will display whenever text in the target
                text element is changed.  
                
Attributes

                If only one trigger character
                is needed, the mentio-trigger-char, mentio-items, mentio-template-url, mentio-search,
                and mentio-select attributes can be placed on the same element with the mentio directive.


                
mentio-for
                Required. The string literal id of the element containing a
                mentio directive that this mentio-menu should attach to.

                
mentio-items
                Required. The data list to bind the menu to.  This must be a reference to a value in current scope.
                Since a mentio-menu has
                isolate scope, the list referenced by the items attribute will
                be passed down through the child scope contexts to the template used in the mention-rule, which then allows it to
                be refrenced in an angular expression that drives an ng-repeat.  Note the reference to items in
                the example below.
                

                
                <mentio-menu mentio-for="'theText'" mentio-trigger-char="@" mentio-items="people" mentio-template-url="/people-mentions.tpl"
                             mentio-search="searchPeople(term)" mentio-select="getPeopleTextRaw(item)"></mentio-menu>

                <script type="text/ng-template" id="/people-mentions.tpl">
                    <ul class="list-group user-search">
                        <i mentio-menu-item="person" ng-repeat="person in items" class="list-group-item">
                            <mg ng-src=" { {person.imageUrl} }" class="user-photo">
                            <span class="text-primary"
                                ng-bind-html="person.name | mentioHighlight:typedTerm:'menu-highlighted' | unsafe"></span>
                            <em class="text-muted" ng-bind="person.bio | words:5"></em>
                        </li>
                    </ul>
                </script>

                Node The mentio directive watches the collection 
                referenced by mentio-items.  If the values in this list are cached and never change, the menu 
                will not appear.  Make sure in your mentio-search function to modify the items list in some way.

                
mentio-trigger-char
                Optional. The character that should trigger the menu behavior.  In the example, '@' and '#'s are used. 
                The default value is '@'.

                
mentio-template-url
                Optional.
                Specifies the template url to use to render the select menu.  The template should iterate the items list to
                present a menu of choices.  The items scope property from the mentio-menu is available to iterate
                within an ng-repeat. The typedTerm scope property
                from the mentio-menu can be accessed in order
                to highlight text in the menu.  The default template presents a simple menu, and assumes that each object has a property
                called label.

                
mentio-search
                Optional.
                Specifies a function call to invoke when the trigger char 
                has been entered into the target text element.  The currently active
                typed term after the trigger char is bound as the term argument in the expression.
                

                The implementation of the search function should populate the data collection referenced by the mentio-items
                attribute with data.  No return is expected from
                the search fucntion.
                

                If no search function is specified, the list of objects in mentio-items will 
                be scanned and the label property will be matched against the typed term.  Alternatively, the expression
                for mentio-items can just be specified using a filter, as in this example:
                


                
                    <input type="text" mentio mentio-typed-text="typedTerm" 
                        mentio-items="simplePeople | filter:label:typedTerm" class="form-control" 
                        ng-model="theTextArea2" size="100"/>               
                

                
mentio-select
                Optional.
                Specifies a function call to invoke when the user has picked an item in the menu.  The item in mentio-items
                corresponding to the selected item in the menu is bound to the item parameter of the select function.  The
                select function may return a string or a Promise that returns a string value to use to replace the 
                current trigger char and mention text.
                

                If no select function is specified, the trigger char is prepended to the label property of the current item.

                
Provided Scope Properties

                
items
                The name items is made available within the scope of the mentio-menu template. It is a mapping
                from the mentio-items attribute specified on the mentio-menu or mentio directives.

                

                    
                    mentio-menu-item
                    
                
                A mentio-menu-item must be contained within a mentio-menu template.
                When applied to an element in this context, the mentio-menu-item directive will add or remove the
                class active to highlight an item in the menu when it is considered selected by the mentio-menu,
                including during mouse-enter events.  If the user
                clicks an element with the mentio-menu-item directive, the item corresponding to the currently
                active mentio-menu-item will be selected by invoking the select function provided in the
                mentio-search attribute of the mentio-menu.

                
Filters
                

                    
                    mentioHighlight
                    
                
                A filter that can be used to replace text with a span having an arbitrary class.  The class must be passed as an extended
                second argument to the filter.  In the following example, text that matches the mentioned text after the trigger char will
                be replaced with a span element with the class menu-highlighted:

                

                
person.name | mentioHighlight:typedTerm:'menu-highlighted'
                The filter is useful within the mentio-menu template when iterating the items in the select menu for the user
                to pick.