ui-router嵌套状态，更改子状态会导致父定义视图重新加载

Question

我在编辑器项目中使用ui-router。我有两个ui视图，一个预览窗格和一个设置窗格。

<div ui-view="preview"></div>
<div ui-view="settings"></div>

我始终希望preview视图显示templates/preview.html。

默认情况下，我希望settings视图显示templates/settings/general.html。

当我点击preview内的项目时，我想更改settings视图以显示templates/settings/item.html ，而无需重新加载preview视图

现在我的路由代码如下所示：

.state('editor.page', {
    url: "/editor/:pageId",
    abstract: true,
    views: {
        'preview': {
            templateUrl: 'templates/preview.html',
            controller: 'PreviewController'
        }
    }
})
.state('editor.page.general', {
    url: "/",
    views: {
        'settings@editor': {
            templateUrl: 'templates/settings/general.html',
            controller: 'GeneralSettingsController'
        }
    }
})
.state('editor.page.item', {
    url: "^/editor/:pageId/:item";
    views: {
        'settings@editor': {
            templateUrl: 'templates/settings/item.html',
            controller: 'ItemSettingsController'
        }
    }
})

在我的preview.html内，每个项目都是ui-sref的链接，如下所示：

<a ui-sref="editor.page.item({pageId:id, item:$index})">{{item}}</a>

加载页面时，我得到预期的行为：preview按预期显示页面，并在templates/settings/general.htm视图中加载settings。

但是，每当我点击某个项目时，settings视图都会按预期更新，但preview视图也会重新加载，这是我不想要的。有没有办法避免这种行为？