0

我有一个用于协作和交互式数据库创建的非常复杂的应用程序，并且遇到了性能问题。该应用程序使用具有各种嵌套视图的 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 - 或者至少是某种允许我在不触发这么多摘要循环的情况下处理该项目的方法......同时，我正忙着尝试使我的过滤器和代码（更普遍地）更有效率，但我觉得大多数这些修复（其中许多无疑是必需的）只会产生肤浅的效果。

我期待任何可用的指导，如果有帮助，我可以分享更多代码（其中有很多，所以我一直在尝试分享对我来说最重要的内容）。

提前致谢！

4

0 回答 0