CODEWITHSUNDEEP
angularjs
Vineet
Vineet

Reputation: 4635

$scope is not binding data in view

I've been developing an e-commerce website and I am stuck at a point. I am using Stripe payment and all is working fine except data biding after token creation. Here is my controller

app.controller('shoppingCartController', ['$scope', '$http', '$sce', 'stripe', '$window', function ($scope, $http, $sce, stripe, $window) {

        $window.Stripe.setPublishableKey('pk_test_saiYYlyCNgO2yZq6Mu******');

        $scope.createToken = function () {
            var expire = $scope.master[0].expire.split('/');
            if ($scope.userDetail.$valid === true) {
                $window.Stripe.card.createToken({
                    number: $scope.master[0].card,
                    cvc: $scope.master[0].cvv,
                    exp_month: expire[0],
                    exp_year: expire[1],
                }, $scope.makepayment);

            }
        }

        $scope.makepayment = function (status, response) {
            if (response.error) {
                $scope.handleStripeCallback(response);
            } else {
                // response contains id and card, which contains additional card details
                var data = {token: response.id, data: $scope.cartData};

                $http.post('make_payment', data).success(function (data) {
                    if (data.status) {
                        $scope.stripePaymentMessage = data.message;
                        $scope.stripePaymentMessageClass = "success";
                    } else {
                        $scope.stripePaymentMessage = data.message;
                        $scope.stripePaymentMessageClass = "danger";
                    }

                })
            }

        }

        $scope.handleStripeCallback = function (response) {
            //alert(response.error.message);
            $scope.stripChargeRequest = true;
            $scope.stripePaymentMessage = response.error.message;
            $scope.stripePaymentMessageClass = "danger";
        }



    }]);

In my view I am trying to handle error or success message with this code

<div ng-show="stripChargeRequest ">
    <div class="alert alert-{{stripePaymentMessageClass}}" role="alert" >
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        {{stripePaymentMessage}}
    </div>
</div>

My question is: stripChargeRequest angular variable contain true / false with normal scope binding but when I am trying to create a token by calling $scope.createToken() it not works. I guess I am forgetting something in calling callback function $scope.makepayment(). Fortunately it is working in controller's scope. I can see error after stripe request in controller but it is not showing in view. Please suggest me the proper way of doing that. Thanks in advance.

Upvotes: 0

Views: 533

Answers (1)

charlietfl
charlietfl

Reputation: 171679

The stripe callbacks are outside of angular so you need to use $apply to tell angular whenever you update the scope so it can run a digest to update the view

Example:

   $scope.handleStripeCallback = function (response) {
        //alert(response.error.message);
        $scope.stripChargeRequest = true;
        $scope.stripePaymentMessage = response.error.message;
        $scope.stripePaymentMessageClass = "danger";
        $scope.$apply(); // tell angular to update view
    }

Upvotes: 2

Related Questions