javascript - angular ui-router 所有 Controller 都重新加载状态变化

Question

我在使用 angular ui-router 时遇到问题，当进入相同状态(但参数不同)时，给定状态下的所有 Controller 都会被刷新。作为引用，我的状态如下:

主要国家

{
    'app': {
        abstract: true,
        controller: 'AppCtrl',
        template: '<div ui-view></div>',
    },
    'app.clients': {
        url: '/clients/:id',
        views: {
            '': {
                templateUrl: 'stage.html', //has named list and detail views
                controller: 'ClientsCtrl'
            },
            'list@app.clients': {
                templateUrl: 'client-list.html',
                controller: 'ClientListCtrl'
            },
            'detail@app.clients': {
                templateUrl: 'client-profile.html',
                controller: 'ClientProfileCtrl'
            }
        }
    }
}

所以最初这一切似乎都运作良好。 client-list.html 看起来像:

client-list.html

<ul>
    <li data-ng-repeat='client in clients'>
        <a ui-sref='pencilem.clients({id: client.id})'>{{client.fullName}}</a>
    </li>
</ul>

因此，期望的行为是当在客户端列表中单击客户端时，会呈现他们的配置文件，更新 url(使用新的客户端 ID)，但我不想重新初始化所有不需要更新的 Controller 。这会导致 ScrollView (重新呈现到 View 的顶部)出现问题，并且如果在那些 Controller 中发生的操作减慢了速度，则成本很高。下图突出显示了这个问题，一旦单击客户端，该 View (粉红色，ClientListCtrl)就会再次调用它的 Controller ，并触发重新渲染，滚动到该 div 的顶部)

有没有办法使用多个 View / Controller 来避免这种情况？我可以在应该传播到各种 Controller 的服务中传递一个“activeClient”对象，但随后我松开可粘贴的 url 以导航到一个状态。

Answer 1

把不想更新的东西放到一个抽象的父状态，大致是这样的:

{
    'app': {
        abstract: true,
        controller: 'AppCtrl',
        template: '<div ui-view></div>',
    },     
    'app.clients': {
        url: '/clients',
        abstract: true,
        views: {
            '': {
                templateUrl: 'stage.html', //has named list and detail views
                controller: 'ClientsCtrl'
            },
            'list@app.clients': {
                templateUrl: 'client-list.html',
                controller: 'ClientListCtrl'
            }
        }
    },
    'app.clients.detail': {
        url: '/:id',
        views: {
            'detail@app.clients': {
                templateUrl: 'client-profile.html',
                controller: 'ClientProfileCtrl'
            }
        }
    }      
}