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, Sep 28 '17 at 05:24
If you are using this code in your web application then you are missing this -> `}`. — Utkarsh Dubey, Sep 28 '17 at 05:31
I have closed bracket. I have missed it here when copying code. — Niranjan Godbole, Sep 28 '17 at 05:38

Nitheesh · Answer 1 · 2017-09-28T05:31:10.153

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 '17 at 05:31

answered Sep 28 '17 at 05:25

Nitheesh

19,238
3
22
49

Thank you. In controller or inside the print function i should apply? – Niranjan Godbole Sep 28 '17 at 05:28
You should apply it in inside the print function, to update the view. I have updated my answer. – Nitheesh Sep 28 '17 at 05:29

Ved · Answer 2 · 2017-09-28T07:41:20.463

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 '17 at 07:41

answered Sep 28 '17 at 06:08

Ved

11,837
5
42
60

I have added but no luck – Niranjan Godbole Sep 28 '17 at 06:46
Thanks for your answer. Still same problem. Whenever i click second time i will get required values – Niranjan Godbole Sep 28 '17 at 07:46
@NiranjanGodbole can you if are you getting value form $sookiestore on first click. – Ved Sep 28 '17 at 07:59
Hi Ved, I am getting on first click. I just displayed in console. also i debugged but binding to view is not happening – Niranjan Godbole Sep 28 '17 at 08:01
have you tried the my edited answer approach exactly same? – Ved Sep 28 '17 at 08:06
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/155486/discussion-between-niranjan-godbole-and-ved). – Niranjan Godbole Sep 28 '17 at 08:06

score 0 · Answer 3 · answered Sep 28 '17 at 08:18

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>

angularjs scope variables are not working but works on second click

3 Answers3

Analysis

Solution