Question

我正在使用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 此问题出现在所有浏览器以及桌面和移动设备上，但在低功耗硬件（手机，平板电脑）上最为明显

https://embed.plnkr.co/hDM6GrUh8droo988MOox/

Answer 1

使用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代替。

Prerender Angular UI Modal

1 个答案: