Prerender 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。