Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

Odd way of getting $formatters to run in a directive #12022

Closed
@geuis

Description

@geuis

I spent hours reading through documentation, blog entries, and Stackoverflow questions to try and answer the question, "How do you get $formatters to run and update the view in directives?".

There is no clear answer that I could find. The directive demo on the documentation page itself doesn't even use any of the $parsers, $formatters, etc on the very page.

Regardless, I was able to get it to work like this: http://plnkr.co/edit/R7HkCJhmJ43KK03LkOmU

app.directive('uppercase', [
  function () {
    return {
      require: 'ngModel',
      link: function ($scope, $element, $attr, $controller) {
        $controller.$parsers.push(function (viewValue) {
          return viewValue.toLowerCase();
        });

        $controller.$formatters.push(function (modelValue) {
          return modelValue.toUpperCase();
        });

        $controller.$viewChangeListeners.push(function () {
          $controller.$modelValue = '';
        });
      }
    }
  }
]);

Setting the $controller.$modelValue to an empty string triggers the formatters and automatically updates the view without needing to call $setViewValue, $render, etc.

I believe this is the closest approach to how most people imagine this should all work, but it is in no way obvious that this should work at all.

I'm not sure if I should submit a pull request to update the documentation for this example, or if there is a better way to do it and this should be fixed.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions