Question

您好我正在开发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");
      }

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

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

以下是打印的html代码。

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

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

Answer 1

在更新控制器内的模型值后尝试使用$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
      }
}

Answer 2

尝试使用$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();
                    })
          }

编辑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：

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

Answer 3

分析

实际上，ngClick拨打$scope.$apply() under-the-hood（以最安全的方式）。所以你不应该在你的Controller中明确地调用它。

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

解决方案

$scope.vm = {};

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

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

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

3 个答案:

分析

解决方案