Refresh element of custom attribute directive in Angular

Question

I have a custom angular directive that I'm using to change the display of price on an item. It's stored as a yearly value and I need to toggle between allowing users to see/edit as yearly or as monthly. So my custom directive is working on my input boxes (not able to use it for a label, div, span, but that's another issue).

I'm able to see that when I toggle the attribute, it picks up the change, but the value in the input doesn't change and I assume it's because not re-rendering the element. Is there any way I can force that to happen?

Here's my directive

angular.module('common.directive').directive('priceMonthly', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attr, ngModel) {
            var perMonth = false;

            attr.$observe('priceMonthly', function(isMonthly) {
                perMonth = (isMonthly.toLowerCase() === "true");
                console.log("per month is " + perMonth); //updating perMonth correctly at this point
                //guessing I need to do something here or in the function that changes the value of the attribute
            });

            function fromView(value){
                return perMonth ? value * 12 : value;
            }

            function toView(value){
                return perMonth ? value / 12 : value;
            }

            ngModel.$parsers.push(fromView);
            ngModel.$formatters.push(toView);
        }
    };
});

Here's where I'm using it.

<input type="text" price-monthly="{{monthlySqftView}}"
       class="form-control no-animate" name="item.priceLow"
       ng-model="item.priceLow" ui-money-mask="2"/>

Here's a jsfiddle of where I'm currently at. So if the dropdown is on monthly, and I type in say 12, the price is correctly 144 which would be the full year price. Now if you change the dropdown to yearly, I need the input to update to 144. https://jsfiddle.net/6tnbonzy/

Can you post the HTML as well (i.e the HTML which uses the directive) — Thangaraja
– Thangaraja, Commented Feb 4, 2016 at 3:43
You can find it on http://stackoverflow.com/questions/20856824/angular-directive-refresh-on-parameter-change — Muhammad Jawwad
– Muhammad Jawwad, Commented Feb 4, 2016 at 5:01

Mohammed mansoor · Accepted Answer · 2016-02-04 03:42:38Z

0

Try scope.$apply() after you made required changes

answered Feb 4, 2016 at 3:42

Mohammed mansoor

8293 gold badges13 silver badges18 bronze badges

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

2 Comments

rschlachter Over a year ago

Tried this, and I get the following error. docs.angularjs.org/error/$rootScope/inprog?p0=$digest

Mohammed mansoor Over a year ago

Remove scope.$apply() and add name atribute to the input box with the same name of ng-model and try.

Marlonz · Accepted Answer · 2016-02-04 03:47:57Z

0

@rschlachter, i am not sure if this can help you. AngularJS uses scope.digest() to clean the dirty data. you might need to put this line of code into your method

        attr.$observe('priceMonthly', function(isMonthly) {
            perMonth = (isMonthly.toLowerCase() === "true");
            console.log("per month is " + perMonth); //updating perMonth correctly at this point
            //guessing I need to do something here or in the function that changes the value of the attribute
            //put it here, if you instantiated scope already. 
            scope.digest();
            //scope.apply();
        });

hope it works

edited Feb 4, 2016 at 3:47

answered Feb 4, 2016 at 3:41

Marlonz

211 silver badge5 bronze badges

1 Comment

rschlachter Over a year ago

Tried this but I get scope.digest() is not a function. Tried scope.$digest() but I get the following error. docs.angularjs.org/error/$rootScope/inprog?p0=$digest

Stepan Kasyanenko · Accepted Answer · 2016-02-04 04:50:52Z

0

It seems you want to do something like this jsfiddle?

<form name="ExampleForm">
 <select ng-model="period">
  <option value="monthly">monthly</option>   
  <option value="yearly">yearly</option>     
 </select>
 <pre>
   period = {{period}}
 </pre>
 Edit as {{period}}: <input price-monthly="obj.price" period="period" ng-model="obj.price" >
 <pre>
   price = {{obj.price}}
 </pre>
</form>

And JS controller

.controller('ExampleController', function($scope) {
$scope.period = 'monthly';})

And JS directive

.directive('priceMonthly', function() {
return {
    restrict: 'A',
    scope:{
      priceMonthly:"=",
      period:"="
    },
    link: function(scope) {
       scope.$watch('period',function(newval){
        if(newval=='monthly')
          scope.priceMonthly = scope.priceMonthly*12;
        if(newval=='yearly')
          scope.priceMonthly = scope.priceMonthly/12;
       })
    }
};});

I hope this will help you.

answered Feb 4, 2016 at 4:50

Stepan Kasyanenko

3,1761 gold badge17 silver badges23 bronze badges

3 Comments

rschlachter Over a year ago

Not quite it. I've updated my original post to include what I'm currently doing based on your jsfiddle

Stepan Kasyanenko Over a year ago

If the dropdown is on monthly, and I type in say 12, the price need to update in input?

Stepan Kasyanenko Over a year ago

Maybe, you need this jsfiddle?

Collectives™ on Stack Overflow

Refresh element of custom attribute directive in Angular

3 Answers 3

2 Comments

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related