Question

我创建了需要ngModel控制器的指令myInput，然后在我触发键时输入事件触发器中的$ viewValue警告ngModelCtrl。$ viewValue。我在IE和Chrome / Firefox之间得到了不同的结果如下：

http://jsfiddle.net/southbridge/zgyv14g0/

在IE中我在触摸键盘之前显示输入的上一个值，但在Chrome / Firefox中显示当前值。

app.directive('myInput',function(){
    return {
        restrict:'A',
        require:'ngModel',
        link:function(scope,element,attrs,ngModelCtrl){
            element.on('input',function(){
              var x=ngModelCtrl.$viewValue;
                alert(x);
            });
        }
    }
});

Answer 1

我不确定在通过angular更新$ viewvalue属性之后是否会触发输入事件（很可能不会），因为angular会通过监听输入/更改等事件本身来更新viewvalue属性。

然而，另一个标准是指令的优先级（如果你是1.3的角度，那么你的指令的优先级大于ngModels，例如：1，ngModel的优先级已经从1开始修改为1）以及哪个处理程序运行第一。但是如果你真的只需要输入元素的值，你可以尝试使用处理程序中的value属性访问它，即this.value

但是，如果您确实需要当前的$viewvalue最佳投注，则可以使用ngModelController的{{3}}。

.directive('myInput',function(){
    return {
        restrict:'A',
        require:'ngModel',
        priority: 1, //if required
        link:function(scope,element,attrs,ngModelCtrl){

          ngModelCtrl.$viewChangeListeners.push(handleViewValueChange);

          function handleViewValueChange(){
              alert(ngModelCtrl.$viewValue);
          }

         //element.on('input', handleViewValueChange); //Or just use this.value in the handler
        }
    }
});

视图值更改时要执行的函数数组。它被调用时没有参数，它的返回值被忽略。这可用于代替模型值的额外$ watch。

＆＃13;

angular.module('app', []).controller('ctrl', function($scope) {

}).directive('myInput', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    priority: 1, //If needed
    link: function(scope, element, attrs, ngModelCtrl) {

      ngModelCtrl.$viewChangeListeners.push(handleViewValueChange);

      function handleViewValueChange() {
        var x = ngModelCtrl.$viewValue;
        alert(x);
      }

      element.on('input', function() {
        alert(ngModelCtrl.$viewValue); //or hust this.value
      });
    }
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <input my-input ng-model="model" />{{model}}
</div>

＆＃13;

ngModelController中的$ viewValue在IE和Chrome / Firefox上显示不同

1 个答案: