javascript - 将模板的 div 分成单独的模板或使用 ng-if 在具有多个 div 的单个模板中显示 div

Question

我是 angularjs 的新手，我需要知道哪个是为以下场景编写代码的更好方法。

场景:我有一个带有多个 div 的 html 模板，我将根据某些条件一次只显示一个 div。

我的想法: 1.) 我应该将 div 分成单独的小模板并在 templateURL 中使用它们还是 2.) 我应该使用 ng-if 在同一个模板 html 中显示和隐藏所需的 div。

注意:各个 div 显示在模态窗口中。

请帮我看看哪个更快。

Answer 1

这取决于。

如果您的 block 包含丰富的 html/css 并且渲染起来很重(或者如果 block 的数量很大 - 例如大型表格的可隐藏行) - 使用 ng-show/ng-hide 会更快。它不会删除/附加元素到 DOM，只是应用 display:none。

如果它们比较简单，你可以随意使用 ng-switch 或 ng-if。

在您的情况下，您一次只想显示一个 - 例如，您可以将 ng-include 与动态模板名称一起使用。我没有遇到任何性能问题。

<div ng-include="templateName"></div>

<script type="text/ng-template" id="templateOne.html">
   Something
</script>
<script type="text/ng-template" id="templateOne.html">
   Something another
</script>

$scope.$watchCollection('[condition1, condition2, ...]', function(conditionsArr){
     if(conditionsArr[0] && !conditionsArr[1]){
          $scope.templateName = 'templateOne.html';
     }else{
          $scope.templateName = 'templateTwo.html';
     }
});