Question

我有一个非常复杂的应用程序，用于协作和交互式数据库创建，并且遇到了性能问题。该应用程序使用带有各种嵌套视图的ui-router ......状态如下：

$stateProvider
    .state('origin', {
      url: '/',
      templateUrl: "/angular/databases.ejs",
      controller: 'DatabasesController'
    })
    .state('databases', {
      url: '/databases',
      templateUrl: "/angular/databases.ejs",
      controller: 'DatabasesController'
    })
    .state('collections', {
      url: '/collections',
      templateUrl: "/angular/collections.ejs",
      controller: 'CollectionsController'
    })
    .state('dataviews', {
      url: '/dataviews',
      templateUrl: "/angular/dataviews.ejs",
      controller: 'DataviewsController',
    })
    .state('dataviews.listView', {
      url: '/listView',
      templateUrl: '/angular/dataListView.ejs',
      controller: 'DataListViewController'    
    })        
    .state('dataviews.listView.theModal', {
      onEnter: ['$uibModal', '$state', 'ActiveStorage', function($uibModal, $state, ActiveStorage) {
        console.log('Open modal');
        $uibModal.open({
          templateUrl: '/angular/viewItemModal.ejs',
          animation: false,
          background:false,
          windowTemplateUrl: '',
          controllerAs: '$ctrl',
          controller: 'DataItemViewController',
          size: 'lg',
        }).result.finally(function() {
          $state.go('^');
        });
      }]
    })
    .state('dataviews.listView.editItem', {
      onEnter: ['$uibModal', '$state', 'ActiveStorage', function($uibModal, $state, ActiveStorage) {
        console.log('Open modal');
        $uibModal.open({
          templateUrl: '/angular/editItemPanel.ejs',
          animation: false,
          background:false,
          windowTemplateUrl: '',
          controllerAs: '$ctrl',
          controller: 'DataItemEditViewController',
          size: 'lg',
        }).result.finally(function() {
          $state.go('^');
        });
      }]
    })

但是，list view中的项目很多，并且依赖于某些复杂的过滤。我在list view中有一个（可能）丑陋的代码，看起来像这样，并提供生成过滤列表的主要ng-repeat：

 <div 
      ng-repeat="(key, value) in $parent.filteredItems2 = (filteredItems = (items | orderBy: storageDefaultOrderBy() |  showItems: state.selectedGroup._id: user : state.set : navigation : sortBy : groupType : hideComplete : selectedCategoryId : classes | filter: dateMagicFilter ) | orderBy: 'groupBy.id' | groupBy: 'groupBy.title' )"

showItems过滤器是一个自定义过滤器，它需要大量自定义用户输入来执行以下操作：切换项目的颜色，按不同属性对项目进行分组，根据已完成状态过滤项目，或者按用户ID 。 groupBy过滤器来自角度过滤器。

我遇到的一个主要问题是，当我打开编辑项目模式时，每个按下一个字段的按键都会触发摘要循环，这会导致屏幕上出现的字符出现无法接受的长时间滞后。

从list view我单击列表中的项目并使用服务来使用简单的getter / setter服务存储活动项目，如下所示：

.service('ActiveItem', function(){

  var selected = {};

  this.setActiveItem = function(data) {
    selected = data;
  }

  this.getActiveItem = function() {
    return selected;
  }
})

模态的控制器，在这种情况下DataItemEditViewController使用此服务获取相关项目，然后绑定到视图：

$scope.item = ActiveItem.getActiveItem();

我使用Batarang试图找到问题的根源，我看到有一个观察者文字如下：

 function (c, d, e, f) {e=a(c,d,e,f); return b(e, c, d)

这可以运行多达60次（如果我输入几个单词）并且需要1000毫秒才能完成。

我的预感是解决这个问题的方法是以某种方式隔离我的模态$ scope - 或者至少某种方式允许我在不触发这么多摘要循环的情况下处理该项目...同时，我是忙着尝试使我的过滤器和代码（更一般地说）更有效率，但我觉得大多数这些修复（其中许多是毫无疑问需要的）只会产生表面效果。

我期待任何可用的指导，并且可以分享更多代码，如果这会有所帮助（有很多代码，所以我一直试图分享对我来说最重要的东西）。

提前致谢！

从$ rootscope分离角度模态范围，以避免在编辑单个项目时触发摘要

0 个答案: