ng-model值没有在ngModelCtrl上更新。$ commitViewValue();

时间:2017-07-07 21:57:45

标签: javascript angularjs web frontend

我有一个指令,我有一个模板,我试图在用户点击回车时更新ng-model。我能够捕获事件并尝试更新值。我在控制器中的元素上有一个观察者,但是在commitViewValue

之后,观察者函数永远不会被触发
(function() {
    'use strict';

    angular.module('aa')
        .directive('ss', [
            function() {

                return {
                    restrict: 'EA',
                    replace: true,
                    transclude: true,
                    scope: {
                        placeholder: '@'
                    },
                    require: 'ngModel',
                    template: '<div class="clear">' +

                        '<input type="text" ng-model="ngModel" ng-model-options="{updateOn:\'change blur\'}" />' +
                        '</div>',

                link: function (scope, elem, attrs, ngModelCtrl) {
                    elem.bind("keyup",function(e) {
                        if (e.keyCode === 13) {
                            e.stopImmediatePropagation();
                            ngModelCtrl.$commitViewValue();
                            scope.$apply(ngModelCtrl.$setTouched);
                        }
                    });
                }

                }
            }
        ]);
})();


 $scope.$watch('pr', function(newValue,oldValue){
                console.log('val>>' + newValue);
            });
<ss ng-model="pr"></ss>

1 个答案:

答案 0 :(得分:1)

使用$setViewValue将数据从隔离范围移动到父范围:

  link: function (scope, elem, attrs, ngModelCtrl) {
        elem.bind("keyup",function(e) {
            if (e.keyCode === 13) {
                e.stopImmediatePropagation();
                 ̶n̶g̶M̶o̶d̶e̶l̶C̶t̶r̶l̶.̶$̶c̶o̶m̶m̶i̶t̶V̶i̶e̶w̶V̶a̶l̶u̶e̶(̶)̶;̶
                //USE $setViewValue
                ngModelCtrl.$setViewValue(scope.ngModel);
                //scope.$apply(ngModelCtrl.$setTouched);
            }
        });

如果您希望父控制器能够设置模型,也可以使用单向<绑定。

scope: {ngModel: '<'}

DEMO on PLNKR

有关详细信息,请参阅