angular-tribute

An AngularJS wrapper for ZURB's Tribute library for native @mentions.

Install

$ npm install angular-tribute --save

or include the UMD build, hosted by npmcdn in a <script> tag. You will also need to include the main ZURB Tribute library:

<script src="js/tribute.js"></script>
<script src="//npmcdn.com/angular-tribute"></script>

Usage

import Angular from "angular";
import AngularTribute from "angular-tribute";

angular
  .module('myApp', [])
  .directive('angularTribute', AngularTribute)

In your controller:

  $scope.people = [
    { name: 'Adam',      email: '[email protected]' },
    { name: 'Amalie',    email: '[email protected]', },
    { name: 'Estefanía', email: '[email protected]', },
    { name: 'Adrian',    email: '[email protected]', },
    { name: 'Wladimir',  email: '[email protected]', },
    { name: 'Samantha',  email: '[email protected]', },
    { name: 'Nicole',    email: '[email protected]', },
    { name: 'Natasha',   email: '[email protected]', },
    { name: 'Michael',   email: '[email protected]', },
    { name: 'Nicolás',   email: '[email protected]', }
  ];

  $scope.tributeConfig = {
    lookup: 'name',
    fillAttr: 'name'
  }

  $scope.tributeOnReplaced = function () {
    console.log('text replaced!');
  };

  $scope.tributeOnNoMatch = function () {
    console.log('no match found in collection!');
  };

And in your view you can add:

  <textarea angular-tribute
    values="$ctrl.people"
    options="$ctrl.tributeConfig"
    on-replaced="$ctrl.tributeOnReplaced"
    on-no-match="$ctrl.tributeOnNoMatch"
  ></textarea>

The options, on-replaced and on-no-match parameters are optional.

The values array should be an array of objects that contain a key and value like so:

[
  {key: "Phil Heartman", value: "pheartman"},
  {key: "Gordon Ramsey", value: "gramsey"}
]

You can modify this structure using the built-in Tribute options.

Events

Tribute broadcasts two events — a tribute-replaced event, and a tribute-no-match event (see docs here). For your convenience, you can bind to these events by passing a function to on-replaced or on-no-match attributes respectively.

License

MIT © ZURB