javascript - 无需在 AngularJS 中重新初始化 Controller 即可更改包含的页面和 URL

Question

我正在使用 AngularJS 制作一个应用程序，并希望能够在“选项卡”之间切换并在面板/容器中来回交换不同的“部分”或 html 模板(使用 ngInclude)。

这是我的模板，它被包裹在 ngView 中。

<div class="row">
    <div class="col-md-3">
        <div class="list-group" data-fixed-sidebar data-nav-control>
            <a href="#/analyze/option1" class="list-group-item" data-tab-route="/analyze/option1.*" >Analyze Option 1</a>
            <a href="#/analyze/option2" class="list-group-item" data-tab-route="/analyze/option2.*">Analyze Option 2</a>
            <a href="#/analyze/option3" class="list-group-item" data-tab-route="/analyze/option3.*">Analyze Option 3</a>
            <a href="#/analyze/option4" class="list-group-item" data-tab-route="/analyze/option4.*">Analyze Option 4</a>
        </div>
    </div>
    <div class="col-md-9">
        <div class="panel panel-default">
            <div class="panel-body">
                <div ng-include="child"></div>
            </div>
        </div>
    </div>
</div>

问题是，当我点击其中一个链接(例如，路由到 #/analyze/option1 的第一个链接)时，它会重新加载我的 Controller 并失去对它当前状态的跟踪.我正在使用 $route 和 $routeProvider 并且更喜欢继续使用此模块的解决方案。

Answer 1

Controller 是 meant to be ephemeral .在我看来，正确的方法 (TM) 是将必要的状态放在 an service 中。 ，它以单例方式初始化，并将在路由更改之间保留状态。