1

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

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

在整个页面的许多地方，我都有整个复杂的嵌套部分，这些部分受保护

ng-show="editMode"

有什么方法可以让我有角度延迟编译那里的整个子树，直到 editMode 变为真或至少直到页面的其余部分已经呈现？

4

1 回答 1

4

您可能可以使用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属性最初是空的，所以最初不会有任何东西要编译。

我还没有尝试过，因为我还不需要类似的东西，但它应该可以工作。

于 2013-06-13T02:39:16.820 回答