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: '[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-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