Question

我在页面中有2个部分的SPA。页面的第二部分基于一些业务逻辑参数不断变化。它可能发生在页面加载或页面加载后。

我们是否可以有一个占位符，其中元素被告知根据某些输入加载此特定视图？

根据逻辑加载部分视图（第二部分）的方式感到困惑。

1）Angular Route - 它可能无法正常工作，因为我正在尝试加载局部视图而不是整个视图

2）需要有'n'个ng-includes，用于设置标志的真或假，并更改视图。

3）ng-切换一组语句，并要求交换机根据值

加载相应的视图

4）州提供者：https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-view

5）一个自定义指令，它决定根据条件加载哪个视图

还需要考虑的另一点是，一旦加载了视图，即使在更改视图后也应该保留其中的内容。例如，我有2个角度局部视图。加载第一个视图并执行某些操作或用户输入的某些数据，然后由于其他操作，已加载视图2。在view2中完成操作后，我将切换回view1。应该从view1恢复数据/ DOM，而不应加载新视图。

任何建议都会有所帮助。

Answer 1

我在制作http://crawfordcomputing.com/AkadineWebOS/#/

时遇到了同样的问题

这是一个单页应用程序，我使用一个单一的路线。现在页面上的图标不是标题的一部分，通常会找到一个菜单，它们实际上是视图的一部分。我使用一个主视图，其中所有视图都加载到数组$ scope.panes []。然后ng-repeat加载数组中的所有视图，如下所示：

<div ng-repeat="pane in panes">
    <div id="{{pane.windID}}" style="position: absolute; top: {{pane.x}}; left: {{pane.y}}; border: 2px solid black; min-height: 78px; height: 10px; overflow: hidden">
        <div style="padding:2px; overflow: auto; background-color: grey; border: 1px solid black">
            <span style="float: left; text-align: left" ng-bind="pane.title"></span><span style="float: right; text-align: right" ng-click="closeWindow(pane.objID)">X</span>
        </div>
        <div compile="pane.content" style="position: ablsolute; background-color: white; height: 10px; padding: 5px; border: 1px solid black; overflow: auto;"></div>
    </div>
</div>

因此，每当用户加载视图时，html都会进入$ scope.panes [] .content。然后通过compile指令编译该html。尝试点击我提供的链接中的图标。会发生什么是将新内容添加到视图中，并保留原始内容（图标）。我甚至可以将具有不同数据的多个视图加载到同一视图，并且如窗口系统所预期的那样，所有视图都保留在屏幕上。所有这一切，没有国家提供者。现在我确定你的应用程序没有窗口，我的观点是：

使用数组存储所有数据，当您返回到view1时，从先前加载的数组加载数据，而不是从数据库或任何地方重新加载。

在SPA和Angular JS中加载局部视图的最佳方法是什么

1 个答案: