Question

说我有以下指令：

myApp.directive('myDirective', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        scope: {
            ngModel: '='
        },
        link: function(scope, elem, attrs, ngModelCtrl) {
            scope.$watch('ngModel', function() {
                ngModelCtrl.$modelValue = 'foo';
            });
        }
    }
});

以下html：

<input ng-model="name" my-directive></input>

基本上，每当用户更改输入时，my-directive理想情况下将内部模型值更改为“foo”，同时保持视图值不变。

但是当我在相应的控制器中打印出$scope.name时，它不记录“foo”，它会记录用户输入的内容。

似乎ngModelCtrl.$modelValue不是控制器正在访问的内容 - 我是否错误地接近了这个问题？

（同时观看范围内的ngModel感觉确实有问题，但我不确定是否有任何其他方式。任何建议都会非常感激！）

Answer 1

如果您正在寻找视图更改，则不应注册手表。 ngModelController的$viewChangeListeners专门用于此目的，并避免在ngModel上创建任何额外的监视。您还可以删除ngModel上的双向绑定设置。

我可以这样想。

.directive('myDirective', function($parse) {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, elem, attrs, ngModelCtrl) {
          /*Register a viewchange listener*/
          ngModelCtrl.$viewChangeListeners.push(function(){ 
              /*Set model value differently based on the viewvalue entered*/
              $parse(attrs.ngModel).assign(scope, ngModelCtrl.$viewValue.split(',')); 
          });
        }
    }
});

<强> Demo

在反过来考虑它时（Credits @Cody），在使用$parser时，它变得更加简洁和恰当。

 ngModelCtrl.$parsers.push(function(val) { return val.split(',') });

如何根据用户输入的$ viewValue更新来更新ngModel的$ modelValue

1 个答案: