Angular JS: Update a directive when the value changes

Question

I have the following directive that helps me to split the decimals from a number and present it with different styles in my view. Thing is, it does not update when the value changes.

I use this directive many many times to present in the view currencies related to money.

This is the directive:

app.directive('money', function(){
    return {
        restrict: 'E'
        , scope: {
            money: '@'
        }
        , controller: controller
        , controllerAs: 'dvm'
        , bindToController: true
        , template: '<h2><sup>$</sup>{{ dvm.dollar }}<sub>.{{ dvm.cents }}</sub></h2>'
    };

    function controller(){
        var parts = parseFloat(this.money).toFixed(2).split(/\./);
        this.dollar = parts[0];
        this.cents = parts[1];
    }
});

I update the values several times depending on the user options, so these values are re-calculated every time the user picks options.

Currently, none of those values are updated when they are re-calculated. What is the better way to solve this?

Maria Ines Parnisari · Accepted Answer · 2017-01-08 03:14:52Z

1

Basically, you need to add a link function that watches over your model and applies any updates:

https://jsfiddle.net/5d7ta5rb/

HTML

<div ng-app="myModule" ng-controller="cont">
  <input ng-model="myMoney" type="number">
  <money ng-model="myMoney"></money>
</div>

JavaScript

var app = angular.module('myModule', [])
app.controller('cont', function($scope) {
  $scope.myMoney = 0;
})
app.directive('money', function() {
  return {
    restrict: 'E',
    scope: {
      ngModel: '=' //bi-directional binding
    },
    template: '<h2><sup>$</sup>{{dollars}}<sub>.{{cents}}</sub></h2>',
    link: function(scope) {
      scope.dollars = 0;
      scope.cents = 0;
      scope.$watch('ngModel', function(newval) {
        if (newval) {
          var parts = parseFloat(scope.ngModel).toFixed(2).split(/\./);
          scope.dollars = parts[0];
          scope.cents = parts[1];
        }
      });
    }
  }
});

answered Jan 8, 2017 at 3:14

Maria Ines Parnisari

17.5k10 gold badges95 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Abiel Muren Over a year ago

Genius, it worked very well, But now my comas has gone. ex: Insted of showing $10,000.00 it shows $10000.00 Tried to solve with the filter | number

Maria Ines Parnisari Over a year ago

You're welcome! Don't forget to mark the answer as 'solved' :)

georgeawg Over a year ago

Please do not use the ng- prefix on attributes in custom directives. The ng- prefix is reserved for core directives. Specifically, the ng-model attribute invokes an instance of the ng-model-controller and attached it to the element.

Maria Ines Parnisari Over a year ago

Interesting @georgeawg. I've always used ngModel in my own directives to be able to use the ngModelController, eg for setValidity. Can you give me a link with more information on why this is a bad idea?

georgeawg Over a year ago

"The ng- is reserved for core directives." -- AngularJS Wiki -- Best Practices.

Collectives™ on Stack Overflow

Angular JS: Update a directive when the value changes

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related