ng-model 未更新，我使用 javascript 库在 angularjs 中更改语言

Question

ng-model 无法更新，直到我按下 space 或返回 space..

我认为这个问题是因为我使用第三方库来更改语言。

我的语言更改库是 http://techhive.co.in/angular_language.js

angular.module("MyApp",[])
 .controller("MyCtrl",function($scope,$http,$timeout){ 
   changeLanguage('pramukhindic:gujarati');
 });

<!DOCTYPE html>
<html ng-app='MyApp'>
<head>
<title>ng-model can't update</title>
<meta charset="UTF8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script type="text/javascript" src="http://techhive.co.in/angular_language.js"> </script>

</head>
<body >
<div >
    <div ng-controller='MyCtrl'>
      <h3>ng-model not update untill we press space or backspace.</h3>
 <form name="main_member_form">
 <input id="tags" ng-model="test"/>
 <label ng-bind="test"></label>
 </form>
    </div>
</div>
</body>
</html>

预先感谢您的帮助。

Answer 1

当您从第 3 方库更新 angular 上下文时，对于这些更改 angular 摘要系统并不知道这些更改。因此，即使外部世界发生了变化，也不会更新 angular 范围绑定视图，除非你运行摘要周期。

在这种情况下，您正在修改 angular 上下文之外的事件的上下文。要更新绑定，您需要运行手动启动摘要循环以使用 scope.$apply()/$timeout

查看页面上的更改

$elem.on('focus', function () {
    //do add $timeout dependency over directive DI array.
    $timeout(function(){
       changeLanguage('pramukhindic:gujarati');
    })
});

更新

OP has changed whole code to have method in controller itself.

我很乐意建议您坚持使用指令方法，这样您就可以通过单个指令单独处理每个输入字段。第 3 方插件正在内部更新输入字段的 DOM 值属性，而不是更新 ng-model 值。在这种情况下，你需要做的是，你需要设置 keyup handle over input 来监听 onkeyup 事件。并且使用 $apply 应用摘要循环，然后将 DOM 中存在的值设置为 ng-model 将起作用

指令

.directive('myLang', function($parse, $timeout) {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ctrl) {
      var model = $parse(attrs.ngModel).assign;
      console.log("Inside directive")
      element.on('keyup', function() {
        //upadate value of ngModel with value attached to DOM value attribute
        scope.$apply(function() {
          console.log(element.val())
          ctrl.$setViewValue(element.val());
          ctrl.$render(); //to update $modelValue
        });
      })
    }
  }
})

Demo Plunkr

Answer 2

您可以使用 $scope.$evalAsync() 来运行摘要循环。将逻辑放入此方法中，您的模型将被更新

ng-model 未更新，我使用 javascript 库在 angularjs 中更改语言

ng-model is not updated, i used javascript library for change language in angularjs

javascript

angularjs