# angular-tribute

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

Latest version **0.0.2** (published 2016-07-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install angular-tribute
pnpm add angular-tribute
yarn add angular-tribute
bun add angular-tribute
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2016-07-27 |
| First published | 2016-07-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=4 |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 10 |
| Author | ZURB |
| Maintainers | mrsweaters |
| Keywords | tribute, mention, input, AngularJS |

## Links

- npm: https://www.npmjs.com/package/angular-tribute
- Repository: https://github.com/zurb/angular-tribute
- Homepage: https://github.com/zurb/angular-tribute#readme
- Issues: https://github.com/zurb/angular-tribute/issues
- npm.io page: https://npm.io/package/angular-tribute

## Recent versions

- 0.0.2 (latest) — 2016-07-27
- 0.0.1 — 2016-07-27

## README

# angular-tribute

> An AngularJS wrapper for ZURB's [Tribute](https://github.com/zurb/tribute) library for native @mentions.

## Install

```js
$ npm install angular-tribute --save
```

**or** include the UMD build, hosted by [npmcdn](https://npmcdn.com) in a `<script>` tag. You will also need to include the main ZURB Tribute library:

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

## Usage

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

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

In your controller:
```js
  $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:
```html
  <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](https://github.com/zurb/tribute#a-collection).

## Events

Tribute broadcasts two events — a `tribute-replaced` event, and a `tribute-no-match` event (see docs [here](https://github.com/zurb/tribute#replace-event)). 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](http://zurb.com)

---
_Source: https://npm.io/package/angular-tribute · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._