Angularjs 将角度模态范围与$rootscope分开,以避免在编辑单个项目时触发摘要

Angularjs 将角度模态范围与$rootscope分开,以避免在编辑单个项目时触发摘要,angularjs,angular-ui-router,ng-repeat,angular-filters,angular-ui-modal,Angularjs,Angular Ui Router,Ng Repeat,Angular Filters,Angular Ui Modal,我有一个用于协作和交互式数据库创建的相当复杂的应用程序,并且遇到了性能问题。应用程序使用具有各种嵌套视图的ui路由器。。。各州的情况如下: $stateProvider .state('origin', { url: '/', templateUrl: "/angular/databases.ejs", controller: 'DatabasesController' }) .state('databases', { ur

我有一个用于协作和交互式数据库创建的相当复杂的应用程序,并且遇到了性能问题。应用程序使用具有各种嵌套视图的ui路由器。。。各州的情况如下:

$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('^');
        });
      }]
    })
.service('ActiveItem', function(){

  var selected = {};

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

  this.getActiveItem = function() {
    return selected;
  }
})
但是,
列表视图中的项目很多,并且依赖于一些复杂的筛选。我在
列表视图中有一段(可能)难看的代码,看起来像这样,并提供生成过滤列表的主要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' )" 
模式的控制器(在本例中为
DataItemEditViewController
使用此服务获取相关项目,然后将其绑定到视图:

$scope.item = ActiveItem.getActiveItem();
我已经使用巴塔朗试图找到我问题的根源,我发现有一个观察者文本如下:

 function (c, d, e, f) {e=a(c,d,e,f); return b(e, c, d)
这可能会运行60多次(如果我键入两个单词的话),并且需要1000毫秒才能完成

我的直觉是,解决这个问题的一种方法是以某种方式隔离我的模态$scope,或者至少以某种方式允许我在不触发太多摘要循环的情况下处理该项。。。与此同时,我正忙着让我的过滤器和代码(更普遍地)更高效,但我觉得这些修复(其中许多无疑是必需的)只会产生表面效果

我期待任何可用的指导,如果有帮助的话,我可以分享更多的代码(有很多,所以我一直在尝试分享对我来说最重要的东西)


提前谢谢

如果您确认对筛选器的重复调用是问题所在(这很可能),则从代码中删除它们。相反,计算列表应一次性显示的内容,并将结果存储在范围中,并使视图显示此结果列表。在可以更改列表的输入上使用ng change,以便仅在需要时重新计算它。@JBNizet-感谢您的帮助。。。让我试一试,我会报告结果的!