我正在使用Anuglar UI Bootstrap模式打开AngularJs的对话框,并且在模态打开时第一次遇到性能损失。当对话框进入视图时,页面上的一些隐藏元素会有明显的卡顿和闪烁。模式打开后的所有后续时间对话框都会顺利显示,没有任何卡顿。
我认为这是由于编译视图的一次性计算开销。有没有办法在我的应用程序的后台预编译模式,以便当用户打开对话框时它已准备就绪。
我正在使用Angular UI Modal服务,如此
$uibModal.open({
templateUrl:'my-modal.html',
controller:'MyModalCtrl'
});
我为这个指令尝试了类似的东西,但我需要一些适用于控制器/对话框的东西。
var directive = $compile("<my-directive></my-directive>");
var instance = directive(scope.$new(true));
我使用的是角1.5.8和angular-ui-bootstrap 1.3 此问题出现在所有浏览器以及桌面和移动设备上,但在低功耗硬件(手机,平板电脑)上最为明显
答案 0 :(得分:3)
使用resolve确保在模态打开之前数据已准备就绪。
以下是文档中的示例。
var modalInstance = $uibModal.open({
animation: $ctrl.animationsEnabled,
ariaLabelledBy: 'modal-title',
ariaDescribedBy: 'modal-body',
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
controllerAs: '$ctrl',
size: size,
resolve: {
items: function () {
return $ctrl.items;
}
}
});
此外,远离模态上的{{}}(如果这是您正在使用的)并使用ng-bind代替。