AngularJSで絵文字を表示するメモ

• こちらのEMOJI CHEAT SHEETで定義された絵文字をAngularJSのアプリケーションを表示してみたメモです。
• このような記述 :smile: で絵文字を表示します。
  • 最終的には画像(CSSスプライト)で表示されます。

デモ

デモはこちら。

• http://hkusu.github.io/AngularJS_emoji_demo/

利用するライブラリ

この「AngularJS Emoji Filter」というライブラリを使います。

• http://globaldev.co.uk/angular-emoji-filter/
  • GitHubはこちら:https://github.com/globaldev/angular-emoji-filter

導入手順メモ

• 上記のサイトからライブラリをダウンロードして、任意の場所に配置します。
  • 下記のように Bower でも出来るみたいなんですが、うまくスプライト画像がビルドできず断念..
    • bower install angular-emoji-filter

HTMLファイルでCSSファイルとJSファイルをインクルード

<link rel="stylesheet" href="emoji/emoji.min.css">

<script src="emoji/emoji.min.js"></script>

AngularJSに組み込む

app.js

'use strict';

angular.module('emojiApp', [
  'ngCookies',
  'ngResource',
  'ngSanitize',
  'ngRoute',
  'ui.bootstrap',
  'emoji' ←追記
])
  .config(['$routeProvider', function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  }]);

試してみる

モデル側の例

angular.module('hogeApp')
  .controller('HogeCtrl', ['$scope', function ($scope) {
        $scope.message = "これは:smile:絵文字です。";
  }]);

↑ になってるところは本当は :smile: です。

VIEW側の例

<div ng-controller="HogeCtrl">
    <span ng-bind-html="message | emoji"></span>
</div>

• AngularJSのフィルタ機能で動作します。
• ライブラリのサイトの例では ng-bind-html-unsafe となっていますが、AngularJS1.2以降では ng-bind-html で良いみたいです。

ブラウザで表示するとこんな感じ。

ほか

デモのソースはこちらに置いておきます。

• https://github.com/hkusu/AngularJS_emoji_demo