ui-router force在附加新DOM之前从文档中删除旧DOM？

Question

我正在使用Angular来构建SPA。我的应用中只有一个ui-view。

<section class="main-content" ng-class="{'menu-open': isSideNavOpen && !floatWithMenu}">
    <div ui-view class="content-inner"></div>
</section>

我定义了几个州：

$stateProvider
    .state('home', {
        reloadOnSearch: false,
        url: '/home?tab',
        templateUrl: AppInfo.assetPath + '/partials/workspaces/workspaces-default.html',
        data: {
            contentToken: AppInfo.CBAC.Welcome
        }
    })
    .state('workspaces', {
        reloadOnSearch: false,
        url: '/workspaces?tab',
        templateUrl: AppInfo.assetPath + '/partials/workspaces/workspaces-view.html',
        data: {
            contentToken: AppInfo.CBAC.Workspace.UsingWorkspace
        }
    })

他们的HTML几乎相同：

<!-- workspaces-default.html -->
<div style="height:100%">
    <x1-workspaces editable="false"></x1-workspaces>
</div>

<!-- workspaces-view.html -->
<div style="height:100%">
    <x1-workspaces editable="true"></x1-workspaces>
</div>

唯一的区别是属性editable。如果它是true，则x1WorkspacesCtrl（x1-workspaces指令控制器）中的函数将运行并从其模板中查询DOM元素。

问题，是当网址从/home更改为/workspaces时，旧DOM仍在文档中，而新DOM已被追加并触发{{1} }。这使x1WorkspacesCtrl返回错误的集合。

我知道我可以使用更具体的选择器修复它，例如document.querySelectorAll。但我认为这很脏。

我想知道在添加新DOM之前是否可以强制从文档中删除旧DOM ？我搜索了一段时间并阅读了ui-router文档，但无法找到答案。我错过了什么吗？

Answer 1

您可以将$ element注入控制器。它将返回控制器所连接的当前元素。