申请说明：
我正在使用AngularJS和Rails创建一个简单的电子商务网站（单页产品列表）。它只处理货到付款订单。用户添加产品和结帐。所有这些过程都是在Angular中完成的。购物车存放在localstorage中。当他结帐时弹出一个模态，要求他选择两种送货方式。根据他选择的运输方式，必须更新在引导模态上显示的价格。
问题描述：
当我尝试这样做时，页面闪烁（花括号出现）。当我重新加载整个东西时，它可以正常工作。
经过一些研究后我发现我必须使用$compile，但我不确定如何使用它。我阅读了几个教程，但我无法弄清楚。
这是我的角度代码。我在bootstrap模式中使用的两个函数是shippingCharges（），totalPrice（）。它们位于角度代码的末尾。
<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模态代码
<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 for 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 a delivery method</legend>
<p>We are making a schedule delivery to <strong><%= delivery_timing[0] %></strong> on <strong><%= delivery_timing[1] %></strong>. If you are not located in the mentioned places please choose an 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 and 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>
请告诉我如何在Bootstrap模式中编译代码？