Angular 1.4.14兼容控制器与服务的Emoji插件及ng-model失效解决方案咨询

我来帮你搞定这个头疼的问题——emojioneArea确实会替换原生textarea，直接打断Angular的双向绑定逻辑，导致ng-model和ng-change失效。下面分两部分给你解决：

一、先修复当前emojioneArea的绑定问题 #

核心思路是用Angular的自定义指令，把emojioneArea的DOM操作和Angular的scope做桥接，让两者能同步数据。

1. 写一个自定义指令 #

在你的Angular模块里加这个指令，专门处理emojioneArea的绑定：

angular.module('你的应用模块名').directive('emojioneArea', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {
      // 初始化emojioneArea，这里可以加你需要的配置
      var emojiInstance = element.emojioneArea({
        placeholder: attrs.placeholder || ''
      });

      // 监听emojioneArea的内容变化，同步到ngModel
      emojiInstance[0].emojioneArea.on('change', function() {
        scope.$apply(function() {
          ngModel.$setViewValue(this.getText());
        }.bind(this));
      });

      // 监听ngModel的变化，同步回emojioneArea（比如初始值或者其他地方修改了model）
      ngModel.$render = function() {
        if (ngModel.$viewValue) {
          emojiInstance[0].emojioneArea.setText(ngModel.$viewValue);
        }
      };

      // 页面销毁时清理资源，避免内存泄漏
      scope.$on('$destroy', function() {
        emojiInstance[0].emojioneArea.destroy();
      });
    }
  };
});

2. 修改你的HTML模板 #

把原来的id和手动初始化代码删掉，改用自定义指令：

<textarea emojione-area ng-model="textmessage" placeholder="Type a message" ng-change="handleTextChange()"></textarea>

哦对了，你原来的ng-change="textarea-message"是语法错误，得改成合法的函数名，比如handleTextChange()，然后在控制器里定义这个函数就行。

3. 控制器里保持正常逻辑 #

angular.module('你的应用模块名').controller('你的控制器名', function($scope) {
  $scope.textmessage = '';
  
  $scope.handleTextChange = function() {
    console.log('当前输入的内容：', $scope.textmessage);
    // 这里写你的业务逻辑
  };
});

这样改完，ng-model就能正常更新，ng-change也能触发了。

二、推荐几个适配Angular 1.4的emoji插件 #

如果不想自己写指令适配，这些原生支持Angular的插件更省心，完全兼容控制器和服务：

1. angular-emoji-picker #

专门为Angular 1.x做的emoji选择器，完美支持双向绑定，不用折腾DOM适配。

• 直接用ng-model绑定数据，ng-change正常触发
• 支持自定义emoji集合，还能通过服务在控制器里手动插入表情
• 用法很简单，引入依赖后直接在模板里用：

  <emoji-picker ng-model="textmessage" placeholder="Type a message"></emoji-picker>
  

2. angular-emojione #

和你用的emojioneArea同属emojione生态，但它是原生Angular封装的，不用自己写指令适配，直接就能和ng-model绑定，上手成本很低。

3. ng-emoji #

轻量级的Angular emoji指令，支持把文本里的emoji代码转成表情，同时带选择器组件，体积小，适合简单场景。

内容的提问来源于stack exchange，提问作者shiminsh