angularjs - ui-router 在附加新 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 指令 Controller )将运行并查询其模板中的 DOM 元素。

问题，当 url 从 /home 更改为 /workspaces 时，旧 DOM 仍在文档中，而新 DOM 已被追加并触发 x1WorkspacesCtrl。这使得 document.querySelectorAll 返回错误的集合。

我知道我可以通过使用更具体的选择器来修复它，例如 "x1-workspaces[editable='true'] .workspaces"。但我认为它很脏。

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

Answer 1

您可以将 $element 注入(inject)到 Controller 中。它将返回 Controller 附加到的当前元素。