ruby on rails - Page flickers when Angular JS is used in Bootstrap modal, but works fine after reload. (tried ngCloak too) -
application description:
i making simple ecommerce website(single page product listing) using angularjs , rails. handles cash on delivery orders. user adds products , checksout. process done in angular. cart stored in localstorage.when checksout modal pops asking him choose choose between 2 shipping methods. depending on shipping method chooses price displayed on bootstrap modal has updated.
problem description:
the page flickers(the curly braces appear) when try this. when reload whole thing works properly.
after research found have use $compile not sure of how use it. read several tutorials not able figure out.
here angular code. 2 functions used in bootstrap modal shippingcharges(), totalprice(). @ end of angular code.
<script> var products = angular.module('products', []); products.controller('listcontroller', ['$scope', function($scope) { $scope.categories = json.parse('<%= j raw(@categories_hash.to_json) %>'); $scope.activecategory = null; $scope.cart = json.parse(localstorage.getitem('cart')); if (!!$scope.cart) { angular.foreach($scope.cart, function(item_quantity, item_id) { $scope.categories.foreach(function(category, index1) { category.products.foreach(function(product, index2) { if (item_id == product.id) { product.ordered_quantity = item_quantity; } }); }); }); }; $scope.formdata = { shipping: "scheduled" }; $scope.addproducttocart = function(product_id) { // event.preventdefault(); var cart = $scope.cart; if (!cart) { cart = {} } if (!cart[product_id]) { cart[product_id] = 0; } cart[product_id] += 1; localstorage.setitem('cart', json.stringify(cart)); $scope.cart = cart; }; $scope.increasequantity = function(product) { product.ordered_quantity += 1; $scope.addproducttocart(product.id); }; $scope.decreasequantity = function(product) { product.ordered_quantity = product.ordered_quantity - 1; var cart = $scope.cart; if (!cart) { cart = {} } cart[product.id] -= 1; localstorage.setitem('cart', json.stringify(cart)); $scope.cart = cart; }; $scope.removeproductfromcart = function(product_id) { var cart = $scope.cart; cart[product_id] = 0; localstorage.setitem('cart', json.stringify(cart)); $scope.cart = cart; } $scope.totalprice = function() { total = 0; $scope.categories.foreach(function(category, index) { category.products.foreach(function(product, index1) { total += product.price*product.ordered_quantity; }); }); return total; }; $scope.togglecategory = function(category) { if ($scope.activecategory == category.category_id) { $scope.activecategory = null; } else { $scope.activecategory = category.category_id; } }; $scope.shouldshowcategory = function(category) { return($scope.activecategory == category.category_id); }; $scope.shippingcharges = function() { var cart = $scope.cart; var shippingcost; if ($scope.formdata.shipping == "scheduled"){ shippingcost = 35; }else if ($scope.formdata.shipping == "unscheduled"){ shippingcost = 75; } cart["shipping"]=shippingcost; localstorage.setitem('cart', json.stringify(cart)); return shippingcost; } }]); </script>boostrap modal code
<div class="modal fade" id="checkoutmodal" tabindex="-1" role="dialog" aria-labelledby="mymodallabel" aria-hidden="true" ng-controller="listcontroller" ng-cloak > <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="mymodallabel">information delivery</h4> </div> <div class="modal-body checkout-details"> <form id="checkoutform" class="form-horizontal"> <div id="checkoutloading" class="progress progress-striped active hidden"> <div class="progress-bar progress-bar-success" style="width: 100%"></div> </div> <fieldset> <legend>choose delivery method</legend> <p>we making schedule delivery <strong><%= delivery_timing[0] %></strong> on <strong><%= delivery_timing[1] %></strong>. if not located in mentioned places please choose unscheduled delivery</p> <div class="radio"> <label><input type="radio" name="shipping" value="scheduled" ng-model="formdata.shipping" ng-change="setshipping('scheduled')">scheduled delivery(rs. 35)</label> </div> <div class="radio"> <label><input type="radio" name="shipping" value="unscheduled" ng-model="formdata.shipping" ng-change="setshipping('unscheduled')">unscheduled delivery(rs.75)</label> </div> <p class="ng-cloak">total: {{shippingcharges() + totalprice()}}</p> </fieldset> <fieldset> <legend>please provide delivery details:</legend> <div class="errormessage alert alert-dismissible alert-danger hidden"> <strong>oh snap!</strong> please provide phone number , address. </div> <div id="checkoutemailformgroup" class="form-group"> <label for="checkoutphone">email</label> <input type="email" class="form-control" id="checkoutemail" placeholder="me@example.com" > </div> <div id="checkoutphoneformgroup" class="form-group"> <label for="checkoutphone">phone</label> <input type="phone" class="form-control" id="checkoutphone" placeholder="+91-9999-999-999" > </div> <div id="checkoutaddressformgroup" class="form-group"> <label for="checkoutaddress">address</label> <textarea class="form-control" id="checkoutaddress" placeholder="plot no street name city" rows="5"></textarea> </div> </fieldset> </form> </div> <div class="modal-footer"> <p class="ng-cloak" >total cost: {{shippingcharges() + totalprice()}}</p> <button type="button" class="btn btn-default" data-dismiss="modal">go back</button> <button id="checkout_trigger" type="button" class="btn btn-brown">confirm</button> </div> </div> </div> </div>can please let me know how compile code in bootstrap modal?
Comments
Post a Comment