javascript - Angular ng-bind-html issue with emoji plugin? -
i using angular emoji plugin requires ng-bind-html
. using emoji plugin creating messages, don't want html code such <h2>hello</h2>
can compiled ng-bind-html mandatory use emoji plugin. suggestions/ways can around posts include emojis not html code gets compiled? thanks
angular.module("app", ["dbaq.emoji","ngsanitize"]).controller("appctrl", function ($scope) { $scope.message = "animals: :dog: :cat: :snake: people: :smile: :confused: :angry: places: :house: :school: :hotel: :poop:"; });
<html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="emoji.min.css"> <script src="angular.min.js"></script> <script src="emoji.min.js"></script> </head> <body ng-app="app" ng-controller="appctrl"> <div ng-bind-html="message | emoji"></div> </body> </html>
emoji plugin --> https://github.com/dbaq/angular-emoji-filter-hd
try simple solution: 1. create file html this:
<html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="emoji.min.css"> <script src="angular.js"></script> <script src="angular-sanitize.js"></script> <script src="emoji.min.js"></script><script src="script.js"></script> </head> <body ng-app="app" ng-controller="appctrl"> <textarea ng-model="message"></textarea><div ng-bind-html="message | emoji"></div> </body>
notes: embed file js called angular-sanitize.js. copy here , save angular-sanitize.js. other files 'emoji.min.css, angular.js & emoji.min.js' exists on app. please mind path too.
2.create js file called script.js this:
angular.module("app", ["emoji","ngsanitize"]).controller("appctrl", ['$scope', function ($scope) { $scope.message = "animals: :dog: :cat: :snake: people: :smile: :confused: :angry: places: :house: :school: :hotel: :poop:";}]);
3.run it.
Comments
Post a Comment