angularjs范围变量不起作用但在第二次单击时起作用

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.

嗨，我正在开发angularjs中的Web应用程序。我已经实现了打印功能。我绑定值来查看使用范围变量。当我第一次点击打印时，我的值没有约束力。当我第二次点击时，我的所有值都会绑定。以下是打印功能。

 $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.

我第一次也会在cookie中拥有值，但不会绑定到视图。每当我第二次点击打印按钮时，一切都将正常工作下面是打印按钮。

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

Below is the html code of print.

下面是打印的html代码。

   <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.

我可以知道我面临的问题是什么？任何帮助，将不胜感激。谢谢。

3 个解决方案

#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。$ apply（）;更新控制器内的模型值后。现在视图将在此之后更新。这是一个样本。

$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
      }
}

#2

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

尝试使用$ apply。虽然这不是一个好方法。

$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.

编辑1：尝试这种方法。这里我使用了Object（key：value）方法来更新打印数据。

$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:

HTML：

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

#3

Analysis

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

实际上，ngClick在引擎盖下调用$ scope。$ apply（）（以最安全的方式）。所以你不应该在你的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.

问题是您尝试显示/更新的变量直接附加到$ scope，这种方法通常会导致此问题。

Solution

$scope.vm = {};

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

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