angularjs ng-bind-html not working with twimoji

Question

AngularJS ng-bind-html not working with twemoji and angular-twemoji

 angular.module('myApp', ['sc.twemoji']) .controller('mycontroller', function($scope, twemoji) { $scope.myemojis = [{ 'unicode': '1f600', 'category': 'people', }, { 'unicode': '1f62c', 'category': 'people', }, { 'unicode': '1f601', 'category': 'people', }, { 'unicode': '1f602', 'category': 'people', }, { 'unicode': '1f603', 'category': 'people', }, { 'unicode': '1f604', 'category': 'people', }, { 'unicode': '1f605', 'category': 'people', }, { 'unicode': '1f606', 'category': 'people', }, { 'unicode': '1f607', 'category': 'people', }, { 'unicode': '1f609', 'category': 'people', }, { 'unicode': '1f60a', 'category': 'people', }, { 'unicode': '1f642', 'category': 'people', }, { 'unicode': '1f643', 'category': 'people', }, { 'unicode': '263a', 'category': 'peopl' }] }) .filter('prefixEmoji', function($sce) { return function(val) { val = "&#x" + val; return $sce.trustAsHtml(val); }; }) .filter('fixEmoji', function($sce) { return function(val) { val = "0x" + val; return $sce.trustAsHtml(String.fromCodePoint(val)); }; }); 

 <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script> <script src="//twemoji.maxcdn.com/twemoji.min.js"></script> <script src="//cdn.rawgit.com/scheffield/angular-twemoji/master/dist/angular-twemoji.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <div ng-app="myApp" ng-controller="mycontroller"> <table class="table table-striped table-bordered"> <tr> <th>Emoji with '&#x' fix</th> <th>Twemoji not working</th> <th>Emoji with '0x' fix</th> <th>Twemoji not working</th> </tr> <tr> <td> <ol> <li ng-repeat="myemoji in myemojis" ng-bind-html="myemoji.unicode | prefixEmoji"></li> </ol> </td> <td> <ol> <li ng-repeat="myemoji in myemojis" ng-bind-html="myemoji.unicode | prefixEmoji | twemoji"></li> </ol> </td> <td> <ol> <li ng-repeat="myemoji in myemojis" ng-bind-html="myemoji.unicode | fixEmoji"></li> </ol> </td> <td> <ol> <li ng-repeat="myemoji in myemojis" ng-bind-html="myemoji.unicode | fixEmoji | twemoji"></li> </ol> </td> </tr> </table> </div> 

Answer 1

You are missing the $sanitize service as per the angular docs:

https://docs.angularjs.org/api/ng/directive/ngBindHtml

You controller code would become:

.controller('mycontroller', function($scope, $sanitize, twemoji) {

NOTE: As per the docs: "In order to use ngSanitize in your module's dependencies, you need to include "angular-sanitize.js" in your application"

So you would possibly include this script reference, really depends on how you have this set-up:

<script src="https://code.angularjs.org/1.5.0/angular-sanitize.js"></script>