angularjs scope variables are not working but works on second click

Question

Hi I am developing web application in angularjs. I have implemented print functionality. I am binding values to view using scope variables. When i click first time on print my values are not binding. When i click second time all my values will bind. Below is the print functionality.

 $scope.Print = function () {
                if ($scope.period == null) {
                    toastr.error($filter('translate')('Please select Year.'));
                }
                else {
                $scope.vehiclepriceprint = $cookieStore.get("carpriceprint");
                $scope.downpaymentprint = $cookieStore.get("downpayment");
      }

First time also i will be having values in cookie but not binding to view. Whenever i click second time on print button everything will be working Below is the print button.

  <input type="button" value="{{'Print' | translate}}" class="blue-button"  ng-click="Print()" id="btnPrint">

Below is the html code of print.

   <span id="lblDownPayment">{{downpaymentprint}}</span>
   <span id="lblFinancialAmount">{{vehiclepriceprint}}</span>

May i know what is the issue i am facing here? Any help would be appreciated. Thank you.

please post the code where you're triggering your print function. i-e ng-click etc — Muhammad Usman
– Muhammad Usman, Commented Sep 28, 2017 at 5:24
If you are using this code in your web application then you are missing this -> }. — Utkarsh Dubey
– Utkarsh Dubey, Commented Sep 28, 2017 at 5:31

Nitheesh · Accepted Answer · 2017-09-28 05:31:10Z

1

Try using $scope.$apply(); after updating the model values inside the controller. Now the view will get updated after that. This is a sample.

$scope.Print = function () {
      if ($scope.period == null) {
           toastr.error($filter('translate')('Please select Year.'));
      }
      else {
           $scope.vehiclepriceprint = $cookieStore.get("carpriceprint");
           $scope.downpaymentprint = $cookieStore.get("downpayment");
           $scope.$apply(); // To update view
      }
}

edited Sep 28, 2017 at 5:31

answered Sep 28, 2017 at 5:25

Nitheesh

20.1k3 gold badges28 silver badges52 bronze badges

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

2 Comments

Niranjan Godbole Over a year ago

Thank you. In controller or inside the print function i should apply?

Nitheesh Over a year ago

You should apply it in inside the print function, to update the view. I have updated my answer.

Ved · Accepted Answer · 2017-09-28 07:41:20Z

0

Try using $apply. Although this is not a good approach.

$scope.Print = function () {
                    if ($scope.period == null) {
                        toastr.error($filter('translate')('Please select Year.'));
                    }
                    else {
                    $scope.vehiclepriceprint = $cookieStore.get("carpriceprint");
                    $scope.downpaymentprint = $cookieStore.get("downpayment");
                    $timeout(function(){//inject $timeout as dependency
                       $scope.$apply();
                    })
          }

Edit 1: Try this approach. here I have used Object (key:value) ways to update the print data.

$scope.printData = {};

$scope.Print = function () {
                    if ($scope.period == null) {
                        toastr.error($filter('translate')('Please select Year.'));
                    }
                    else {
                    $scope.printData.vehiclepriceprint = $cookieStore.get("carpriceprint");
                    $scope.printData.downpaymentprint = $cookieStore.get("downpayment");

          }

HTML:

<span id="lblDownPayment">{{printData.downpaymentprint}}</span>
   <span id="lblFinancialAmount">{{printData.vehiclepriceprint}}</span>

edited Sep 28, 2017 at 7:41

answered Sep 28, 2017 at 6:08

Ved

12.1k5 gold badges46 silver badges61 bronze badges

6 Comments

Niranjan Godbole Over a year ago

I have added but no luck

Niranjan Godbole Over a year ago

Thanks for your answer. Still same problem. Whenever i click second time i will get required values

Ved Over a year ago

@NiranjanGodbole can you if are you getting value form $sookiestore on first click.

Niranjan Godbole Over a year ago

Hi Ved, I am getting on first click. I just displayed in console. also i debugged but binding to view is not happening

Ved Over a year ago

have you tried the my edited answer approach exactly same?

|

Francesco Colamonici · Accepted Answer · 2017-09-28 08:18:29Z

0

Analysis

Actually, ngClick calls $scope.$apply() under-the-hood (in the safest way possible). So you should not call it explicitly in your Controller.

Problem is that the variables you are trying to display/update are attached directly to the $scope, and this approach usually causes this issue.

Solution

$scope.vm = {};

$scope.Print = function() {
    $scope.vm.vehiclepriceprint = $cookieStore.get("carpriceprint");
};

<span id="lblFinancialAmount">{{ vm.vehiclepriceprint }}</span>

answered Sep 28, 2017 at 8:18

Francesco Colamonici

1,3071 gold badge12 silver badges17 bronze badges

Collectives™ on Stack Overflow

angularjs scope variables are not working but works on second click

3 Answers 3

2 Comments

6 Comments

Analysis

Solution

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

6 Comments

Analysis

Solution

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related