Question

从我在Angular 2.0中看到的，我有一种感觉，我将使用Angular 1.x一段时间。它具有我认为我需要的所有构建块，唯一的缺点是它确实存在脏检查的性能问题所以我试图考虑更多。现在ng-repeat可能是一个问题，因为它增加了观察者的数量。

所以我有这个模板的一部分（在玉中）：

li(ng-repeat='topMenuItem in sideMenu.topMenu', ng-class='{"is-active": topMenuItem.display === sideMenu.activeTopMenu}')
  a(href='{{ topMenuItem.href }}') {{ topMenuItem.display }}
    ul(ng-if='sideMenu.secondMenu.length > 0 && topMenuItem.display === sideMenu.activeTopMenu')
      li(ng-repeat='secondMenuItem in sideMenu.secondMenu', ng-class='{"is-active": secondMenuItem.display === sideMenu.activeSecondMenu}')
        a(href='{{ secondMenuItem.href }}') {{ secondMenuItem.display }}

当显示22个菜单项时，观察者数量为90（使用this书签摘要）。

我决定尝试使用$ interpolate来生成该菜单。我最终得到了一个针对编译函数的指令：

compile: function(element, attributes) {
  var topLevelExpression = $interpolate('<li{{ cssClass }}><a href="{{ topMenuItem.href }}">{{ topMenuItem.display }}</a>{{ secondLevelMenuHtml }}</li>');
  var secondLevelExpression = $interpolate('<li{{ cssClass }}><a href="{{ secondMenuItem.href }}">{{ secondMenuItem.display }}</a></li>');

  var updateMenu = function() {
    var html = '';

    sideMenu.topMenu.forEach(function(topMenuItem) {
      var cssClass = topMenuItem.display === sideMenu.activeTopMenu ? ' class="is-active"': '';
      var secondLevelMenuHtml = '';

      if(sideMenu.secondMenu.length > 0 && topMenuItem.display === sideMenu.activeTopMenu) {
        secondLevelMenuHtml += '<ul>';

        sideMenu.secondMenu.forEach(function(secondMenuItem) {

          var cssClass = secondMenuItem.display === sideMenu.activeSecondMenu ? ' class="is-active"': '';
          secondLevelMenuHtml += secondLevelExpression({
            secondMenuItem: secondMenuItem,
            cssClass: cssClass,
          });
        });

        secondLevelMenuHtml += '</ul>';
      }

      html += topLevelExpression({
        topMenuItem: topMenuItem,
        cssClass: cssClass,
        secondLevelMenuHtml: secondLevelMenuHtml
      });
    });

    element.find('.application-navigation').html(html);
  };

  return function($scope) {
    $scope.$watchCollection('sideMenu', function() {
      updateMenu();
    });
  }
}

从我的测试中，这段代码的功能与ng-repeat完全相同，输出看起来应该是这样。此版本只有16个观察者，当更多元素显示在ng-repeat所在的位置时，该数字不会增加。

由于此代码只是为了使这段代码工作所需的最低限度，我认为javascript本身与为ng-repeat执行的代码一样高效（如果不是更有效）。

这个假设是否正确？

使用ng-repeat进行循环DOM生成是否存在任何问题？

Answer 1

棘手的问题。

我最初认为如果你one-time-bind对象的属性，那么如果对象发生了变化，属性就会被重新绑定。

<div>{{::menu.menuItem}}</div>
<button ng-click="changeMenu()">switch</div>

NOT 案例。

虽然可以做些什么 - 虽然有一点点/ hacky方法（可能在评论中可能会提出更好的方法） - 是强迫Angular重新绑定。其中一位候选人是ng-if：

<div ng-if="bound">
  <div>{{::menu.menuItem1}}</div>
  <div>{{::menu.menuItem2}}</div>
</div>
<button ng-click="changeMenu()">Switch</div>

然后，在控制器中：

$scope.bound = true;
$scope.menu = {..}; // menu 1
$scope.changeMenu = function(){
  $scope.menu = {..}; // menu 2
  $scope.bound = false;
  $timeout(function(){$scope.bound = true;}, 0);
}

Plunker

AngularJS：ng-repeat vs $ interpolate

1 个答案: