javascript - Angular : size of list in javascript not update

Question

我在 AngularJS 应用程序中使用 SweetAlert 作为消息通知。问题是，当我在 Bootstrap 模式中删除表格行(购物车中的产品数量)并单击以关闭 Bootstrap 模式时。我想知道屏幕上的行数(购物车中的产品)没有立即更新。

当按下行最右侧的垃圾桶按钮时，将显示 SweetAlert 对话框，然后单击确认删除行。


它需要单击其他链接，例如单击“关于我们”链接。

单击后，购物车中的产品数量将更新。

这是在删除购物车中的产品时 angularjs Controller 中的代码片段。

    $scope.DeleteCartProduct = function (Row, ROLine, index) {
   //   console.log("DeleteCartProduct .." + index + " ROLine " + ROLine + " Row " + Row);
        swal({
          title: "Are you sure?",
          text: "คุณต้องการลบรายการสินค้า " + ROLine.ProductNameTh + " !",
          type: "warning",
          showCancelButton: true,
          confirmButtonColor: "#DD6B55",
          confirmButtonText: "Yes, delete it!",
          cancelButtonText: "No, cancel please!",
          closeOnConfirm: true,
          closeOnCancel: true
        },
        function(isConfirm){
          if (isConfirm) {
            $('#CartRow'+index).remove();
            $scope.ROHead.ROLineList.splice(index, 1);
            $scope.ROLineList.splice(index, 1);
            if ($scope.ROHead.ROLineList.length <= 0 || $scope.ROHead.ROLineList === undefined) {
              $('#HideCartTable').show('slow');
              $('#ShowCartTable').hide('slow');
            } else if ($scope.ROHead.ROLineList.length > 0) {
              $('#HideCartTable').hide('slow');
              $('#ShowCartTable').show('slow');
            }
            $scope.UpdateCartSummary();
          } else {
          }
        });
    }

任何想法，谢谢

Answer 1

首先，在 Controller 中混合使用 jQuery 和 AngularJS 是个坏主意。您应该使用指令包装您的 jQuery 元素( slider 、下拉列表等)。无论如何，要使此代码有效，您应该知道如何使用 $scope.$apply。

当你想在 jQuery 插件回调中运行 Angular 代码时，你必须在包装器 $scope.$apply 中进行。您的代码应如下所示:

$scope.DeleteCartProduct = function (Row, ROLine, index) {
//   console.log("DeleteCartProduct .." + index + " ROLine " + ROLine + " Row " + Row);
    swal({
      title: "Are you sure?",
      text: "คุณต้องการลบรายการสินค้า " + ROLine.ProductNameTh + " !",
      type: "warning",
      showCancelButton: true,
      confirmButtonColor: "#DD6B55",
      confirmButtonText: "Yes, delete it!",
      cancelButtonText: "No, cancel please!",
      closeOnConfirm: true,
      closeOnCancel: true
    },
    function(isConfirm){
      $scope.$apply(function(){
        if (isConfirm) {
          $('#CartRow'+index).remove();
          $scope.ROHead.ROLineList.splice(index, 1);
          $scope.ROLineList.splice(index, 1);
          if ($scope.ROHead.ROLineList.length <= 0 || $scope.ROHead.ROLineList === undefined) {
            $('#HideCartTable').show('slow');
            $('#ShowCartTable').hide('slow');
          } else if ($scope.ROHead.ROLineList.length > 0) {
            $('#HideCartTable').hide('slow');
            $('#ShowCartTable').show('slow');
          }
          $scope.UpdateCartSummary();
        } else {

        }
      });
    });
}

但是不要在 $apply 函数中运行另一个 $apply，它会使你的脚本崩溃。