An AngularJS 1.5+ wrapper for ZURB's Tribute library for native @mentions.
$ npm install angular-tribute --saveor include the UMD build, hosted by unpkg in a <script> tag. You will also need to include the main ZURB Tribute library:
<script src="js/tribute.js"></script> <script src="//unpkg.com/angular-tribute"></script>import Angular from "angular"; import AngularTribute from "angular-tribute"; angular .module('myApp', []) .directive('angularTribute', AngularTribute)In your controller:
$scope.people = [ { name: 'Adam', email: 'adam@email.com' }, { name: 'Amalie', email: 'amalie@email.com', }, { name: 'Estefanía', email: 'estefania@email.com', }, { name: 'Adrian', email: 'adrian@email.com', }, { name: 'Wladimir', email: 'wladimir@email.com', }, { name: 'Samantha', email: 'samantha@email.com', }, { name: 'Nicole', email: 'nicole@email.com', }, { name: 'Natasha', email: 'natasha@email.com', }, { name: 'Michael', email: 'michael@email.com', }, { name: 'Nicolás', email: 'nicole@email.com', } ]; $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-replacedandon-no-matchparameters 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.
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.
MIT © ZURB