Skip to content

snicker/Angular-At-Directive

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 

Repository files navigation

Angular-At-Directive

Requirements

  • AngularJS
  • Jquery

Usage

  • Include caret.js and at.js in your index.html

      <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
      <script src="app/scripts/caret.js"></script>
      <script src="app/scripts/at.js"></script>
      <script src="app/scripts/app.js"></script>
    
  • Add 'At' to your module's list of dependencies

      angular.module('myApp', ['At'])
    
  • Add at-user and auto-complete to textarea

      <textarea ng-model="message.content"
            ng-trim="false"
            rows="5"
            cols="100"  
            flag="@"
            at-user
            auto-complete></textarea>
    
  • Add your own at-list template after tag

      <span ng-show="!isAtListHidden" auto-follow="true">
          <ul class="list-at-user">
              <li ng-repeat="user in users | filter: query.text | limitTo: 5"
                  ng-click="autoComplete(user)">
                  <img ng-src="{{ user.image }}" class="avatar pull-left" width="50" height="50">
                  <span>{{ user.username }}</span>
              </li>
          </ul>
      </span>
    
  • Note : your at-list template should have ng-show="!isAtListHidden" attribute.

ToDo

  • Add contenteditable Demo
  • Refacor AtUtils service
  • Support emoji
  • Add unit test

##SP Thanks @ichord And his At.js

About

AngularJS Directive for At(@) user feature

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%