角度服务模式未正确关闭并多次调用

  • 本文关键字:调用 服务 模式 angularjs
  • 更新时间 :
  • 英文 :


在Angular-Service-Modal的GitHub存储库#225上提到了

,但我没有$ rootscope上的$,所以这不是问题。

(下面还包括代码(我的模态在关闭/隐藏时多次被调用。例如。[http://beta.belgianbrewed.com/en/product/budweiser-24x30cl]

(

可以在/assets/angular/controllers/shopactioncontroller.js

上找到该文件

问题可能在哪里?

代码调用:shopactioncontroller.js

中的showpopup(productid,'buyimmediate'(
app.controller('ShopActionDialogController', ['$scope', 'CurrentProduct', function ($scope, CurrentProduct) {
$scope.CurrentProduct = CurrentProduct;
console.log("Dialog called and ...");
console.log(CurrentProduct);

//modal.element.modal();
//modal.close.then(function (result) {
//    $scope.message = result ? "You said Yes" : "You said No";
//});
}]);
app.controller('ShopActionController', ['$rootScope', '$scope', '$injector', '$http', '$timeout', 'ModalService', 'EndpointService', 'ImageResizeService', 'hotkeys',
function ($rootScope, $scope, $injector, $http, $timeout, ModalService, EndpointService, ImageResizeService, hotkeys) {
    $scope.Resize = ImageResizeService;
    $scope.Amount;
    $scope.InitAmount;
    $scope.ProductId;
    $scope.ProductVariantId;
    $scope.OrderLineId;
    $scope.isLoading = false;
    $scope.isShown = true;
    //$scope.addedToCart = false; //new - not implemented
    $scope.inCartAmount = 0; //new - not implemented
    $scope.inWishList = false;
    $scope.Change = function (Amount) {
        $scope.Amount += Amount;
    }
    $scope.showPopup = function (ProductId,action) {
        EndpointService.searchProducts(undefined, 0, 1, ProductId).then(function (response) {
            ModalService.showModal({
                templateUrl: "ProductPopup.html",
                controller: "ShopActionDialogController",
                inputs: {
                    CurrentProduct: response.data[0]
                }
            }).then(function (modal) {
                // The modal object has the element built, if this is a bootstrap modal
                // you can call 'modal' to show it, if it's a custom modal just show or hide
                // it as you need to.
                // console.log("test");
                modal.element.modal();
                var args = {
                    Amount: $scope.Amount,
                    ProductId: response.data[0].Id,
                    ProductVariantId: response.data[0].ProductVariantId,
                    OrderLineId: undefined,
                    InitAmount : $scope.InitAmount
                };
                if (action != undefined) {
                    args.Action = action;
                }
                $rootScope.$broadcast('init', args);
                $scope.Amount = $scope.InitAmount;
                modal.element.on('hidden.bs.modal', function (e) {
                  //  $scope.Amount = $scope.InitAmount;
                    console.log("hidden");
                    modal.element.remove();
                 //   close(result, 200);
                });
                modal.close.then(function (result) {
                   // console.log("close");
                    $scope.Amount = $scope.InitAmount;
                    modal.element.remove();
                 //   close(result, 200);
                    //ModalService.closeModals();
                    // $scope.message = result ? "You said Yes" : "You said No";
                });
            });
        });
    }
    $scope.CurrentProduct;// = CurrentProduct;
    $scope.initiated = false;
    var initListener = $scope.$on('init', function (event,args) {
        if (!$scope.initiated) {
            $scope.Amount = args.Amount;
            $scope.InitAmount = args.InitAmount;
            $scope.ProductId = args.ProductId;
            $scope.ProductVariantId = args.ProductVariantId;
            $scope.OrderLineId = args.OrderLineId;
            switch (args.Action)
            {
                case 'BuyImmediate':
                    $scope.AddToCart();
                    break;
                case 'View':
                    break;
            }
        }
    });
    $scope.$on('$destroy', function () {
        console.log("killing this scope");
        initListener();
    });
    $scope.init = function (Amount, ProductId, ProductVariantId, OrderLineId) {
        $scope.initiated = true;
        $scope.Amount = Amount;
        $scope.InitAmount = Amount;
        $scope.ProductId = ProductId;
        $scope.ProductVariantId = ProductVariantId;
        $scope.OrderLineId = OrderLineId;
    }
    $scope.getSpecification = function (Product,SpecificationId, SpecificationName) {
        var Spec = undefined;
        angular.forEach(Product.Specifications, function (elem, i) {
            if (elem.SpecificationCandidate.SpecificationId == SpecificationId || 
                elem.SpecificationCandidate.Specification.Name == SpecificationName) {
                Spec = elem.SpecificationCandidate;
            }
        });
        return Spec;
    }
    $scope.isAddedInCart = function () {
        return $scope.OrderLineId != undefined;
    }
    $scope.PriceInclusive = function (orderline) {
        return orderline.Amount * orderline.Product.Price * 1.21;
    }
    $scope.PriceExclusive = function (orderline) {
        return orderline.Amount * orderline.Product.Price;
    }
    $scope.bindKeys = function () {
        hotkeys.add({
            combo: '+',
            description: 'Add 1 to ammount',
            callback: function () {
                $scope.Amount += 1;
            }
        });
        hotkeys.add({
            combo: '-',
            description: 'Substract 1 from ammount',
            callback: function () {
                if ($scope.Amount > 0) {
                    $scope.Amount -= 1;
                }
            }
        });
    }
    $scope.IncrementWith = function (Amount) {
        var newAmount = $scope.Amount + Amount;
        if (newAmount >= 0) {
            $scope.Amount = newAmount;
        }
    }
    $scope.ChangeSortBy = function (SortBy) {
        console.log("Changing Sort By");
    }
    $scope.ChangePageSize = function (PageSize) {
        console.log("Changing PageSize");
    }
    $scope.GetCart = function () {
        return EndpointService.orderlines;
    }
    $scope.RemoveOrderLine = function ($event) {
        $scope.isLoading = true;
        EndpointService.removeOrderLine($scope.OrderLineId)
            .then(function (response) {
                EndpointService.orderlines = response.data;
                $rootScope.$broadcast('DeleteOrderLine', { OrderLineId: $scope.OrderLineId });
                $scope.isLoading = false;
                $scope.isShown = false;
            });
        $event.preventDefault();
        return false;
    }

    $scope.AddToWishlist = function () {
        //AddToWishlist
        EndpointService.addToWishList($scope.ProductId)
            .then(function (response) {
                //return true;
                $scope.inWishList = true;
            });
        return false;
    }
    $scope.RemoveFromWishlist = function () {
        EndpointService.removeFromWishList($scope.ProductId)
            .then(function (response) {
                //return true;
                $scope.isShown = false;
            });
        return false;
    }

    $scope.PrepareAddOrderLineRequest = function (onlyBulk) {
        if (!onlyBulk || (onlyBulk && $scope.InitAmount == 0 && $scope.InitAmount < $scope.Amount)) {
            var request = EndpointService.UpdateAmountRequest;
            request.OrderLineId = $scope.OrderLineId;
            request.Amount = $scope.Amount;
            request.ProductId = $scope.ProductId;
            return request;
        } else {
            return undefined;
        }
    }
    $scope.FocusAmountInput = function () {
        if ($scope.Amount == $scope.InitAmount) {
            $scope.Amount = "";
        }
    }
    $scope.LeaveAmountInput = function () {
        if ($scope.Amount == "") {
            $scope.Amount = $scope.InitAmount;
        }
    }
    $scope.$on("BroadCastBulkOrders", function () {
        var request = $scope.PrepareAddOrderLineRequest(true);
        if (request != undefined) {
            $rootScope.$broadcast("AddBulkOrder", request);
            $scope.Amount = $scope.InitAmount;
        }
    });
    $scope.AddToCart = function () {
        $scope.isLoading = true;
        var request = $scope.PrepareAddOrderLineRequest(false);
        EndpointService.updateAmount(request)
            .then(function (response) {
                EndpointService.orderlines = response.data;
                $rootScope.$broadcast('BasketChanged');
                angular.forEach(response.data, function (elem, i) {
                    if (elem.ProductId == $scope.ProductId) {
                        $scope.OrderLineId = elem.Id;
                        $scope.inCartAmount = elem.Amount;
                    }
                });
                $scope.Amount = $scope.InitAmount;
                $scope.isLoading = false;
            });
        return false;
    }
    $scope.UpdateOrderLine = function () {
        //$emit required values
        $scope.isLoading = true;
        var request = $scope.PrepareAddOrderLineRequest(false);
        request.isFixed = true;

        EndpointService.updateAmount(request)//$scope.OrderLineId, $scope.ProductId, $scope.Amount, true)
            .then(function (response) {
                angular.forEach(response.data, function (elem, i) {
                    if (elem.Id == $scope.OrderLineId) {
                        $rootScope.$broadcast('ChangeAmount', { OrderLineId: $scope.OrderLineId, Amount: $scope.Amount });
                    }
                });

                $scope.isLoading = false;
            });
        return false;
    }
}]);

服务

app.service('EndpointService', ['$http', '$q', function ($http, $q) {
this.orderlines = new Array();
//search for products, standard paging included
this.searchProducts = function (searchTerm, page, pageSize, productId) {
    var endPoint = "/api/Endpoint/SearchProducts?$expand=Tags,Specifications($expand=SpecificationCandidate($expand=Specification)),CoverPhoto";
    if (searchTerm != undefined && searchTerm.length > 0) {
        endPoint = endPoint + "&$filter=indexof(Title,'" + searchTerm + "') gt -1"; //make a var
    } else if (productId !== undefined) {
        {
            endPoint = endPoint + "&$filter=Id eq " + productId + " "; //make a var
        }
        //endPoint = endPoint + "&$filter=";
    }
    endPoint = endPoint + "&$skip=0&$top=" + pageSize;
    return $http.get(endPoint);
    //.then(function (response) {
    //    //console.log(response.data);
    //    return response.data;
    //})
}
// this.ShippingCost = $q.defer();
 this.ShippingCost = new Object();
 this.calculateShipping = function (address, shippingMethodId) {
    if (address == undefined) {
        return this.ShippingCost;
    } else {
        //https://appendto.com/2016/02/working-promises-angularjs-services/
        //var deferred = $q.defer();
        var endPoint = "/api/Endpoint/CalculateShippingCost?timestamp=" + Date.now();
        return $http({
            url: endPoint,
            method: "GET",
            params: {
                DeliveryAddress: address,
                ShippingMethodId: shippingMethodId,
                timestamp: Date.now()
            }
        })
    }

}
this.getOrderLines = function () {
    var endPoint = "/api/Endpoint/GetOrder";
    return $http({
        url: endPoint,
        method: "GET",
        params: {
            timestamp : Date.now()
        }
    })
    .then(function (response) {
        this.orderlines = response.data;
        return this.orderlines;
    });
}
this.removeOrderLine = function (OrderLineId) {
    var endPoint = "/api/Endpoint/RemoveOrderLine";
    return $http({
        url: endPoint,
        method: "POST",
        params: {
            OrderLineId: OrderLineId
        }
    });
}
this.addToWishList = function (ProductId) {
    var endPoint = "/api/Endpoint/AddToWishlist";
    return $http({
        url: endPoint + "?ProductId=" + ProductId,
        method: "GET"
    });
}
this.removeFromWishList = function (ProductId) {
    var endPoint = "/api/Endpoint/RemoveFromWishlist";
    return $http({
        url: endPoint + "?ProductId=" + ProductId,
        method: "GET"
    });
}
this.UpdateAmountRequest = {
    ProductId: "",
    Amount: 0,
    OrderLineId: "",
    isFixed : false
}
this.bulkUpdateAmount = function (request) {
    var endPoint = "/api/Endpoint/BulkAddOrderLines";
    return $http({
        url: endPoint,
        method: "POST",
        headers: {
            'Content-Type': "application/json"
        },
        data: request
    });
}
this.updateAmount = function (request){//OrderLineId,ProductId, Amount, isFixed) {
    var endPoint = "/api/Endpoint/AddOrderLine?timestamp="+ Date.now();
    //console.log("hey, changing the amount " + Amount + " for product id " + ProductId + " are you? :) ");
    return $http({
        url: endPoint,
        method: "POST",
        headers: {
            'Content-Type': "application/json"
        },
        data: request
    });
}
}]);

您需要将引导模式隐藏侦听器添加到对话框控制器上下文中。

app.controller('ShopActionDialogController', ['$scope', '$element', 'CurrentProduct', 'close', function ($scope, $element, CurrentProduct, close) {
$scope.CurrentProduct = CurrentProduct;
console.log("Dialog called and ...");
console.log(CurrentProduct);

//modal.element.modal();
//modal.close.then(function (result) {
//    $scope.message = result ? "You said Yes" : "You said No";
//});
//listen for when the modal is dismissed and resolve the ModalService Close promise
$element.on('hidden.bs.modal', function (e) {
    close({
            currentProduct: CurrentProduct
        }, 200); // close, but give 200ms for bootstrap to animate
    });
}]);

请注意,$元素和关闭被添加到控制器依赖项中。

最新更新