Angularjs 如何隐藏和显示模板，而不是每次都销毁和重新导入模板_Angularjs_Angular Ui Router

Angularjs 如何隐藏和显示模板，而不是每次都销毁和重新导入模板

angularjs

Angularjs 如何隐藏和显示模板，而不是每次都销毁和重新导入模板,angularjs,angular-ui-router,Angularjs,Angular Ui Router,我正在使用ui路由器和命名视图。它工作完美，但不符合我的目的。我不希望每次单击菜单项时都注入模板，但只在加载应用程序后第一次单击时注入模板。剩下的时间，它应该只是隐藏模板，并显示当前处于活动状态的模板，以便单击菜单。当返回到原始菜单单击时，它应该只对隐藏的模板执行ngShow=“true”，并隐藏当前模板。这是否可以在不编辑angular ui路由器中的cleanupLastView（）的情况下实现如果我注释掉cleanupLastView（），它只会继续注入模板，而不会对旧模板进行任何操作。

我正在使用ui路由器和命名视图。它工作完美，但不符合我的目的。我不希望每次单击菜单项时都注入模板，但只在加载应用程序后第一次单击时注入模板。剩下的时间，它应该只是隐藏模板，并显示当前处于活动状态的模板，以便单击菜单。当返回到原始菜单单击时，它应该只对隐藏的模板执行ngShow=“true”，并隐藏当前模板。这是否可以在不编辑angular ui路由器中的cleanupLastView（）的情况下实现

如果我注释掉cleanupLastView（），它只会继续注入模板，而不会对旧模板进行任何操作。所以两人最终都出现了。尝试调试cleanupLastView（），但我无法确定哪些变量对我可用，因此我可以重新显示第二次单击的内容，而不是再次注入

index.html

<!DOCTYPE html> 
<html lang="en"> 
<head ng-app="myApp"> 
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link href="style.css" rel="stylesheet"> 
    <script type="text/javascript" src=".lib/angular-1.3.0/angular.js"></script> 
    <script type="text/javascript" src="./angular-ui-router.js"></script> 
    <script type="text/javascript" src="./modular/ct-ui-router-extras.core.js"></script> 
    <script type="text/javascript" src="./modular/ct-ui-router-extras.dsr.js"></script> 
    <script type="text/javascript" src="../timerService.js"></script> 
    <script type="text/javascript" src="../dataService.js"></script> 
    <script type="text/javascript" src="app.js"></script> 
</head> 
<body> 
<div class="navbar navbar-default navbar-static-top" role="navigation"> 
    <ul class="nav navbar-nav"> 
        <li ng-class="{active: $state.includes('main')}"><a ui-sref="home">Main</a></li> 
        <li ng-class="{active: $state.includes('files')}"><a ui-sref="files">Files</a></li> 
    </ul> 
</div> 
<div> 
    <div ui-view="pane"></div> 
</div> 
</div> 
</body> 
</html>

tpl.pane-0.html

<div>
    <input type='text'></input>
</div>

tpl.pane-1.html

<div >
    <div data-ui-href='first'></div>
    <div data-ui-href='second'></div>
</div>

tpl1.first.html

<div>
    <input type='text'></input>
</div>

tpl1.second.html

<div>
Second
</div>


第二

这是我的应用程序的简化代码。它可以处理多个命名视图，但在deepStateRedirect（似乎与导航条类型的模板相关，而不是（？）Stick）时失败。对吗？我添加了参数deepStateRedirect:true，用于所有被注入的视图，但没有效果。如果tpl1.first.html的输入文本框被写入，并且视图切换到main并返回，则在输入框中找不到文本。我做错了什么？

是的，你可以这样做，但这需要一些定制工作

更改状态，使其使用空模板
在州控制器中，检查文档是否已包含视图的HTML（使用唯一ID）
如果需要，请使用
```
$template
```
缓存和
```
$compile
```
创建原始模板视图并将其附加到文档正文
在模板中，可以使用
```
ng show=“isState_expression | isState”
```
expression切换模板的可见性

基本上，ui路由的工作原理与以前相同，但您自己处理模板的编译。一旦它在DOM中（而不是在ui视图中）。您可以将其留在那里，由

ng show

处理

我不建议对状态使用

resolve

，因为它将变成静态

这是关于

$compile

的手册：

$compile

下面是关于

$compile

的教程：

下面是关于

$compile

的堆栈回答：

为什么它不适合您的需要？不显示状态时是否需要保留状态

如果是这样，也许你应该调查一下。它允许您保留状态的

$scope

，而不是每次都创建/销毁它。这比试图重新发明轮子要好

看看。

嗨，听起来不错。但它似乎只限于标签。有没有一种方法可以使它适用于任何插入模板的DIV元素？一点也没有。您可以使用您想要使用的任何东西来切换视图（状态）。这对我来说不起作用。我之所以选择它，是因为在deepStateRedirect的解释中，它表示用于导航类型的菜单。对吗？请让我知道我做错了什么。谢谢！我尝试按照您的代码进行操作，并看到我可以创建自己的函数来在编译函数中创建和隐藏视图，而不是使用常规的cleanupLastView（）和updateView（boolean）方法。但访问变量似乎是个问题。无法访问其中的$templateCache。

<div>
Second
</div>