angularjs ng-bind-html不能与twimoji一起使用

Question

AngularJS ng-bind-html无法使用twemoji和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

根据angular docs：

，您缺少$ sanitize服务

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

您的控制器代码将变为：

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

注意：根据文档：＆＃34;为了在模块的依赖项中使用ngSanitize，您需要包含＆＃34; angular-sanitize.js＆＃34;在您的申请中＆＃34;

所以你可能会包含这个脚本引用，实际上取决于你如何进行这种设置：

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