Ruby on rails 在引导模式中使用Angular JS时，页面会闪烁，但在重新加载后工作正常。（也穿斗篷）

应用说明：

我正在使用AngularJS和Rails制作一个简单的电子商务网站（单页产品列表）。它只处理货到付款订单。用户添加产品并选中sout。所有这些过程都是以角度进行的。购物车存储在localstorage中。当他选中时，会弹出一个模式，要求他在两种运输方式中进行选择。根据运输方式，他选择的价格显示在引导模式必须更新

问题描述：

当我尝试这样做时，页面会闪烁（大括号出现）。当我重新加载整个东西时，它工作正常

经过一些研究，我发现我必须使用

$compile

，但我不知道如何使用它。我读了好几篇教程，但我都不明白

这是我的角度代码。我在引导模式中使用的两个函数是shippingCharges（）、totalPrice（）。它们位于角度代码的末尾

var products=角度模块（'products'，[]）；
products.controller（'ListController'，['$scope'，function（$scope）{
$scope.categories=JSON.parse（“”）；
$scope.activeCategory=null；
$scope.cart=JSON.parse（localStorage.getItem（'cart'））；
如果（！！$scope.cart）{
angular.forEach（$scope.cart，函数（项目数量，项目id）{
$scope.categories.forEach（函数（category，index1）{
类别。产品。forEach（功能（产品，index2）{
if（item_id==product.id）{
product.ordered_数量=物料_数量；
}
});
});
});
};
$scope.formData={
运输：“预定”
};
$scope.addProductToCart=函数（产品id）{
//event.preventDefault（）；
var cart=$scope.cart；
如果（！购物车）{
购物车={}
}
如果（！购物车[产品标识]）{
购物车【产品标识】=0；
}
购物车[产品标识]+=1；
setItem（'cart'，JSON.stringify（cart））；
$scope.cart=购物车；
};
$scope.increaseQuantity=功能（产品）{
产品订购数量+=1；
$scope.addProductToCart（product.id）；
};
$scope.decreaseQuantity=功能（产品）{
product.ordered_数量=product.ordered_数量-1；
var cart=$scope.cart；
如果（！购物车）{
购物车={}
}
购物车[product.id]-=1；
setItem（'cart'，JSON.stringify（cart））；
$scope.cart=购物车；
};
$scope.removeProductFromCart=函数（产品id）{
var cart=$scope.cart；
购物车【产品标识】=0；
setItem（'cart'，JSON.stringify（cart））；
$scope.cart=购物车；
}
$scope.totalPrice=函数（）{
总数=0；
$scope.categories.forEach（函数（类别、索引）{
类别.产品.forEach（功能（产品，索引1）{
合计+=产品价格*产品订购数量；
});
});
返回总数；
};
$scope.toggleCategory=函数（类别）{
if（$scope.activeCategory==category.category\u id）{
$scope.activeCategory=null；
}否则{
$scope.activeCategory=category.category\u id；
}
};
$scope.shouldShowCategory=函数（类别）{
返回（$scope.activeCategory==category.category\u id）；
};
$scope.shippingCharges=函数（）{
var cart=$scope.cart；
var运输成本；
如果（$scope.formData.shipping==“计划”）{
运输成本=35；
}else if（$scope.formData.shipping==“未计划”）{
运输成本=75；
}
购物车[“运输”]=运输成本；
setItem（'cart'，JSON.stringify（cart））；
退货运费；
}
}]);

试试

上的ng斗篷（只需要一件）@a我已经试过了。它不起作用。我读到Angular没有在引导模式中绑定（？）html。我们必须用$compile来完成。我无法做到这一点：（我担心你对angular不够了解。如果你不提供plnkr或jsbin，那就太难了。@a阅读你是对的。我是angular的新手。这是到heroku上托管的应用程序的链接。后端是用rails编写的。如果你在购物袋中添加一些产品，并查看带有小胡子的模式弹出窗口。如果你重新加载并回过头来看，它工作得很好。以下是plunker中的相同代码：plunker无法运行它，因为缺少来自后端的输入。