AngularJS：触发NG-变化，NG-KEYUP或$ $范围手表在撰写韩文字符

本文介绍了AngularJS：触发NG-变化，NG-KEYUP或$ $范围手表在撰写韩文字符的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我建立一个韩国的词汇训练，我想用户输入的比较结果为人民类型。

在韩国和其他一些亚洲语言，您撰写多KEYUP事件字母。在Chrome中，$范围。$手表，NG-KEYUP和NG-变化仅被触发后，这封信已完全组成以及一个新的字母或输入空格。我不介意AngularJS不会触发任何东西，直到最后一个字母已经完全组成，但一旦这封信已经完成，应该无需再添加一个空格或启动下一个字触发。

HTML

 ＆LT;表格名称=forms.vocabularyForm＆GT;
  ＆LT;输入名称=回答ID =答案NG-模式=vocabularyCtrl.answerNG变化=vocabularyCtrl.checkChange（）NG-KEYUP =vocabularyCtrl.checkKeyUp（$事件）TYPE =文本/＆GT;
＆LT; /表及GT;

控制器：

  .controller（'VocabularyCtrl'，[
  '$范围'，
  '$位置'，
  功能（$范围，$位置）{    this.checkChange =功能（）{
      的console.log（回答的变化：+ this.answer）;
    };    this.checkKeyUp =功能（$事件）{
      的console.log（回答KEYUP：+ this.answer）;
    };    $范围。$腕表（'vocabularyCtrl.answer'，函数（answerNew，answerOld）{
      的console.log（'answerOld：'+ answerOld +'，answerNew：'+ answerNew）;
    }，真正的）;  };
]）;

例如：

 输入：ㄱ
安慰：
answerOld：，answerNew：
回答KEYUP：输入：가
安慰：
answerOld：，answerNew：
回答KEYUP：输入：감（字符现已全面组成）
安慰：
answerOld：，answerNew：
回答KEYUP：输入：감ㅅ（开始下一个字符，相同的行为与空格键）
安慰：
answerOld：감，answerNew：
回答变化：감
回答KEYUP：감

解决方案

正如角队的一个有用的成员解释，所有触发器都有意在撰写文字pssed燮$ P $。更多细节。

的建议，我创建在撰写字符手动更新模型的自定义指令：

指令：

 （函数（）{
  使用严格的;  angular.module（'对myApp'，[]）  //角的NG-变化，NG-KEYUP和$范围。$手表不被触发
  //而组成（例如书写韩文音节时）。
  //参见：https://github.com/angular/angular.js/issues/10588
  //这个自定义指令使用element.on（'输入'）代替，它得到
  //而撰写触发。
  .directive（'cstInput'，函数（）{
    返回{
      限制：'A'，
      要求：'^ ngModel'，
      范围： {
        ngModel：'='，//同步模式
      }，
      链接：功能（范围，元素，ATTRS，ngModel）{
        element.on（'输入'，函数（）{
          scope.ngModel = element.val（）;
        }）;
      }
    };
  }）;
}）（）;

控制器：（由ippi建议）

  $范围。$腕表（'quizzesCtrl.answer'，函数（回答）{
  的console.log（答案）;
}）;

HTML

 ＆LT;形式NG控制器=QuizzesController为quizzesCtrl＆GT;
  ＆LT;输入CST-输入名称=回答ID =答案NG-模式=quizzesCtrl.answer类型=文本/＆GT;
＆LT; /表及GT;

更新

我不得不把code更改为以下，使其工作在Firefox（Chrome浏览器和Safari浏览器工作正常与上面的code）

。

指令：

 （函数（）{
  使用严格的;  angular.module（'对myApp'，[]）  //角的NG-变化，NG-KEYUP和$范围。$手表不被触发
  //而组成（例如书写韩文音节时）。
  //参见：https://github.com/angular/angular.js/issues/10588
  //这个自定义指令使用element.on（'输入'）代替，它得到
  //而撰写触发。
  .directive（'cstInput'，函数（）{
    返回{
      限制：'A'，
      要求：'^ ngModel'，
      链接：功能（范围，元素，ATTRS，ngModel）{
        element.on（'输入'，函数（）{
          范围。$应用（函数（）{
            scope.ngModel = element.val（）;
            。范围$的eval（attrs.cstInput，{'答案'：scope.ngModel}）; //只有在没有范围已在指令被定义工作
          }）;
        }）;
      }
    };
  }）;}）（）;

控制器：

  this.checkAnswer =功能（回答）{
  如果（回答=== this.quiz.answer）{
    this.isCorrect = TRUE;
  }
};

HTML（请注意，任何参数传递需要CST-输入回调上市）：

 ＆LT;形式NG控制器=QuizzesController为quizzesCtrl＆GT;
  ＆LT;输入CST-输入=quizzesCtrl.checkAnswer（回答）NG模型=quizzesCtrl.answerNAME =答案ID =答案类型=文本/＆GT;
＆LT; /表及GT;

I'm building a Korean vocabulary trainer and I want to compare user input as people type.

In Korean and some other Asian languages, you compose letters with multiple keyup events. In Chrome, $scope.$watch, ng-keyup and ng-change only get triggered after the letter has been fully composed and either a new letter or a space has been entered. I don't mind AngularJS not triggering anything until the last letter has been fully composed but once the letter has been completed, it should trigger without having to add a whitespace or starting the next word.

HTML:

<form name="forms.vocabularyForm">
  <input name="answer" id="answer" ng-model="vocabularyCtrl.answer" ng-change="vocabularyCtrl.checkChange()" ng-keyup="vocabularyCtrl.checkKeyUp($event)" type="text" />
</form>

Controller:

.controller('VocabularyCtrl', [
  '$scope',
  '$location',
  function($scope, $location) {

    this.checkChange = function () {
      console.log("answer change: " + this.answer); 
    };

    this.checkKeyUp = function ($event) {
      console.log("answer keyUp: " + this.answer);
    };

    $scope.$watch('vocabularyCtrl.answer', function (answerNew, answerOld) {        
      console.log('answerOld: ' + answerOld + ', answerNew: ' + answerNew);         
    }, true);        

  };     
]);

Example:

Input: ㄱ 
Console:
answerOld: , answerNew:
answer keyUp:

Input: 가
Console:
answerOld: , answerNew:    
answer keyUp:

Input: 감 (character is now fully composed)
Console:
answerOld: , answerNew:    
answer keyUp:

Input: 감ㅅ (starting the next character, same behaviour with space bar)
Console:
answerOld: 감, answerNew:
answer change: 감
answer keyUp: 감

解决方案

As explained by a helpful member of the Angular team, all triggers are intentionally suppressed while composing characters. More details here.

As suggested, I created a custom directive that manually updates the model while composing characters:

Directive:

(function() {
  'use strict';

  angular.module('myApp', [])

  // Angular's ng-change, ng-keyup and $scope.$watch don't get triggered
  // while composing (e.g. when writing Korean syllables).
  // See: https://github.com/angular/angular.js/issues/10588  
  // This custom directive uses element.on('input') instead, which gets
  // triggered while composing.
  .directive('cstInput', function() {
    return {
      restrict: 'A',
      require: '^ngModel',
      scope: {
        ngModel: '=', // sync model
      },      
      link: function (scope, element, attrs, ngModel) {
        element.on('input', function() {          
          scope.ngModel = element.val();       
        });
      }
    };
  });  
})();

Controller: (as suggested by ippi)

$scope.$watch('quizzesCtrl.answer', function (answer) {
  console.log(answer);
});

HTML:

<form ng-controller="QuizzesController as quizzesCtrl">
  <input cst-input name="answer" id="answer" ng-model="quizzesCtrl.answer" type="text" />
</form>

Update

I had to change the code to the following to make it work in FireFox (Chrome & Safari work fine with the code above).

Directive:

(function() {
  'use strict';

  angular.module('myApp', [])

  // Angular's ng-change, ng-keyup and $scope.$watch don't get triggered
  // while composing (e.g. when writing Korean syllables).
  // See: https://github.com/angular/angular.js/issues/10588  
  // This custom directive uses element.on('input') instead, which gets
  // triggered while composing.
  .directive('cstInput', function() {
    return {
      restrict: 'A',
      require: '^ngModel',    
      link: function (scope, element, attrs, ngModel) {
        element.on('input', function() {                  
          scope.$apply(function(){            
            scope.ngModel = element.val();
            scope.$eval(attrs.cstInput, {'answer': scope.ngModel}); // only works if no scope has been defined in directive
          });
        });
      }
    };
  });

})();

Controller:

this.checkAnswer = function (answer) {        
  if (answer === this.quiz.answer) {        
    this.isCorrect = true; 
  }
};

HTML (note that any passed in argument needs to be listed in cst-input-callback):

<form ng-controller="QuizzesController as quizzesCtrl">
  <input cst-input="quizzesCtrl.checkAnswer(answer)" ng-model="quizzesCtrl.answer" name="answer" id="answer" type="text" />
</form>

这篇关于AngularJS：触发NG-变化，NG-KEYUP或$ $范围手表在撰写韩文字符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！