Angular filter, directive, and service to linkify text. As of v0.3.0, angular-linkify works for twitter/github mentions, twitter hashtags, and basic urls.
Install via either bower, npm, CDN (jsDelivr) or downloaded files:
bower install angular-linkify --savenpm install angular-linkify --save- use CDN file
- download angular-linkify.zip
Include angular-linkify.min.js in your angular application
<!-- when using bower -->
<script src="bower_components/angular-linkify/angular-linkify.min.js"></script>
<!-- when using npm -->
<script src="node_modules/angular-linkify/angular-linkify.min.js"></script>
<!-- when using cdn file -->
<script src="//cdn.jsdelivr.net/npm/angular-linkify@2.0.0/angular-linkify.min.js"></script>
<!-- when using downloaded files -->
<script src="angular-linkify.min.js"></script>Inject module into your application
angular.module('YourApp', ['linkify']);Use as a AngularJS Directive
<!-- As a directive, no twitter -->
<div ng-bind="someModel" linkify></div>
<!-- As a directive, with twitter parsing -->
<div ng-bind="someModel" linkify="twitter"></div>Inject as a AngularJS Service
// Injected into controller
angular.module('someModule').controller('SomeCtrl', function ($scope, linkify, $sce) {
var text = "@scottcorgan and http://github.com";
// Twitter
// Must use $sce.trustAsHtml() as of Angular 1.2.x
$scope.text = $sce.trustAsHtml(linkify.twitter(text));
// outputs: <a href="https://twitter.com/scottcorgan" target="_blank">scottcorgan</a> and <a href="http://github.com" target="_blank">http://github.com</a>
// Github
// Must use $sce.trustAsHtml() as of Angular 1.2.x
$scope.text = $sce.trustAsHtml(linkify.github(text));
// outputs: <a href="https://github.com/scottcorgan" target="_blank">scottcorgan</a> and <a href="http://github.com" target="_blank">http://github.com</a>
});grunt