itsm-whlg/wechat/assets/views/customform/tpl/mentio.html

    <div ng-view></div>





<ul class="list-group user-search">
            <li mentio-menu-item="person" ng-repeat="person in items" class="list-group-item">
                <img 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>

    <ul class="list-group product-search demo-scrollable-menu">
            <li mentio-menu-item="product" ng-repeat="product in items" class="list-group-item clearfix">
                <div class="row">
                    <div class="col-xs-2 text-center">
                        <img ng-src="{{product.imageUrl}}" class="product-photo">
                    </div>
                    <div class="col-xs-10">
                        <h4 class="list-group-item-heading">{{product.title | words:5}}</h4>
                        <p class="list-group-item-text">{{product.description | words:7}}</p>
                    </div>
                </div>
            </li>
        </ul>



 <form action="#">
        <div class="container">
            <div class="row">
                <header class="text-center">
                    <h1 class="heading">Ment.io</h1>
                    <h6 class="text-muted">(Angular @mentions with macros)</h6>
                </header>
            </div>
            <div class="row">
                <div class="col-md-12">

                    <div class="form-group">
                        <h3>Content Editable:</h3>
                        <div contenteditable mentio
                            mentio-typed-term="typedTerm"
                            mentio-macros="macros"
                            mentio-require-leading-space="true"
                            mentio-select-not-found="true"
                            class="editor form-control"
                            mentio-id="'htmlContent'"
                            id="htmlContent"
                            ng-model="htmlContent"
                            >
                        </div>
                        <span class="caption small">Mentioned: {{typedTerm}}</span>
                    </div>

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

                    <div class="form-group">
                        <h3>Text Area:</h3>
                        <textarea mentio
                                mentio-macros="macros"
                                mentio-trigger-char="'@'"
                                mentio-items="people"
                                mentio-template-url="/people-mentions.tpl"
                                mentio-search="searchPeople(term)"
                                mentio-select="getPeopleTextRaw(item)"
                                mentio-typed-term="typedTerm2"

                                class="editor form-control"
                                mentio-id="'theTextArea'"
                                ng-model="theTextArea"
                                ng-trim="false"
                                rows="6">
                        </textarea>
                        <span class="caption small">Mentioned: {{typedTerm2}}</span>
                   </div>

                    <mentio-menu

                                mentio-for="'theTextArea'"
                                mentio-trigger-char="'#'"
                                mentio-items="products"
                                mentio-template-url="/product-mentions.tpl"
                                mentio-search="searchProducts(term)"
                                mentio-select="getProductTextRaw(item)"></mentio-menu>

                    <div class="form-group">
                        <h3>Text Input:</h3>
                        <!--Note the use of an angular expression for the ID.  This can be done within ng-repeat using $index-->
                        <input mentio

                                ng-model="theText"
                                mentio-id="'theText' + myIndexValue"
                                type="text"
                                class="form-control"
                                ng-trim="false"
                                size="100"/>
                    </div>

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


                    <div class="form-group">
                        <h3>Minimal:</h3>
                        <!--Note no need for external mentio-menu elements because there is only one trigger character needed-->
                        <input type="text" mentio mentio-typed-text="typedTerm" mentio-items="simplePeople | filter:label:typedTerm" class="form-control" ng-model="theTextArea2"
                                  size="100"/>
                        </textarea>
                    </div>

                    <div class="form-group">
                        <h3>TinyMCE (iframe-based):</h3>
                        <textarea ui-tinymce="tinyMceOptions" mentio mentio-typed-text="typedTerm" 
                            mentio-items="simplePeople | filter:label:typedTerm" ng-model='foo'
                            mentio-iframe-element="iframeElement"></textarea>
                    </div>

                    <div class="form-group">
                         <input type="submit">
                    </div>
                </div>
            </div>
        </div>
        </form>
    
</div>