1

根据我对 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（使用此书签片段）。

我决定尝试使用 $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 执行的代码一样有效（如果不是更有效的话）。

这个假设正确吗？

以这种方式循环 DOM 生成与使用 ng-repeat 相比有什么问题吗？

4

1 回答 1

0

棘手的问题。

我最初的想法是，如果你一次性绑定一个对象的属性，那么如果对象改变了，属性就会被重新绑定。

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

事实并非如此。

不过，人们可以做的——尽管有一些不稳定/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);
}

普朗克

于 2014-10-30T02:54:21.823 回答