预渲染 Angular UI 模态

Question

我正在使用 Anuglar UI Bootstrap Modal 打开一个带有 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));

我正在使用 angular 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。