How to manually rerun formatter chain in angularjs directive with ngModel?

Question

Angular.js ngModel has the ability to declare a chain of parsers and formatters. Some more details can be found at the great answer to 'How to do two-way filtering in angular.js?'

now the formatter chain only will be run if the ngModel will update. so if you have a second input-parameter that affects the viewValue (is used in one of the formatters) this will not trigger an update of the View. similar as far as i found ngModel only uses a simple $watch - so if your model is a collection/object it will not trigger if sub-elements are changed.

What is the best way to implement a deep watch for ngModel -
or a watch for a additional parameter that should rerun the formatter chain?

there are other similar questions:
Angularjs: how to “rerun” $formatters when some setting is changed?

Answer 1

currently there is no direct api to call the internal formatter chain. there is a github feature request for this. as work-around you just can copy the internal code:

function runFormatters(ctrl){
    // this function is a copy of the internal formatter running code.
    // https://github.com/angular/angular.js/issues/3407#issue-17469647

    var modelValue = ctrl.$modelValue;

    var formatters = ctrl.$formatters;
    var idx = formatters.length;

    var viewValue = modelValue;

    while (idx--) {
        viewValue = formatters[idx](viewValue);
    }

    if (ctrl.$viewValue !== viewValue) {
        ctrl.$viewValue = ctrl.$$lastCommittedViewValue = viewValue;
        ctrl.$render();

        ctrl.$$runValidators(modelValue, viewValue, angular.noop);
    }

}

this Plunker demonstrates the usage in combination with a watch for additional parameters:

// deepwatch all listed attributes
scope.$watch(
    function(){
        return [scope.extraThingToWatchFor, scope.someOther];
    },
    function() {
        console.log("\t runformatters()");
        runFormatters();
    },
    true
);

this is a second Plunker to demonstrate the deepwatch on ngModel

// deepwatch ngModel
scope.$watch(
    function(){
        return ngModelCtrl.$modelValue;
    },
    function(newData) {
        runFormatters(ngModelCtrl);
    },
    true
);