Question

我有一个相当复杂的angular.js应用程序，它在同一页面上有“显示”模式和“编辑”模式。大部分复杂性都处于编辑模式，大多数用户都不会处于“编辑”模式。

您可以在此处查看示例：http://www.chefsteps.com/activities/squeaky-cheese-curds（但您无权访问编辑模式）。正如您将看到的，我的页面加载速度比理想情况慢。

在整个页面的许多地方，我都有完整的受

保护的复杂嵌套部分

ng-show="editMode"

有没有什么方法可以让角度延迟在那里编译整个子树，直到editMode变为true或者至少直到页面的其余部分都被渲染了？

Answer 1

您可以使用ngSwitch和ngInclude的组合。

对于您需要处理的部分，而不是ng-show，请使用ng-switch：

<section ng-switch on='editMode'>
  <!-- editing case, leave src
  <div ng-switch-when='true'>
    <div ng-include src='edittemplates.sectionFoo'></div>
  </div>

  <!-- show case -->
  <div ng-switch-when='false'>
    <!-- show some stuff -->
  </div>
</section>

通常，ng-switch仍将编译所有DOM，但这里的技巧最初将是让edittemplates对象以空键开头：

App.controller('Foo', function($scope) {
   $scope.edittemplates = {
     sectionFoo: ''
   };
});

然后，当您切换到编辑模式时，请填写这些模板值：

$scope.edit = function() {
  $scope.editMode = true;

  if ($scope.edittemplatesLoaded) return; // Don't set these twice
  $scope.edittemplates.sectionFoo = 'sectionFoo.html';
  $scope.edittemplates.sectionBar = 'sectionBar.html';
  // etc.
  $scope.edittemplatesLoaded = true;         
};

因为src属性最初是空的，所以最初无需编译。

我没有尝试过这个，因为我还没有需要它，但它应该可以工作。

在angular.js中延迟编译隐藏元素

1 个答案: