Javascript 在某些事件上加载角度模板_Javascript_Angularjs

Javascript 在某些事件上加载角度模板

javascript angularjs

Javascript 在某些事件上加载角度模板,javascript,angularjs,Javascript,Angularjs,一般来说，我对angular和frontend比较陌生，但我希望看到的是类似于使用ngView进行路由的情况，但没有路由，即只在某些事件上加载模板。更具体地说，假设我在标题的某个地方有一个输入字段，当我单击/聚焦该字段时，会显示一个带有不同输入选项的特殊面板。诀窍是，这个输入字段和其他元素已经是加载到ngView的模板的一部分，所以据我所知，我不能在选项窗格中使用另一个ngView。使用ngIf、ngShow、ngHide、ngSwitch来处理类似的内容 <button ng-click

一般来说，我对angular和frontend比较陌生，但我希望看到的是类似于使用

ngView

进行路由的情况，但没有路由，即只在某些事件上加载模板。更具体地说，假设我在标题的某个地方有一个输入字段，当我单击/聚焦该字段时，会显示一个带有不同输入选项的特殊面板。诀窍是，这个输入字段和其他元素已经是加载到

ngView

的模板的一部分，所以据我所知，我不能在选项窗格中使用另一个

ngView

。

使用ngIf、ngShow、ngHide、ngSwitch来处理类似的内容

<button ng-click="showStuff = true">Show Stuff</button>
<button ng-click="showStuff = false">Hide Stuff</button>
<div ng-show="showStuff">Showing Stuff</div>
<div ng-hide="showStuff">Hiding Stuff</div>

Show Stuff
藏东西
展示物品
隐藏的东西

请看一个快速而肮脏的工作示例

请注意，showStuff变量只是由根作用域上的angular神奇地创建的，因为我没有使用控制器

如果ng和ng包含以下内容，则可以使用ng加载模板：


加载模板！

当参数表达式为true时，ngIf指令将向DOM添加元素。然后，angular将编译内部指令ngInclude，加载模板。

您可以使用-ngRoute的一个更强大的替代方案。此外，请研究如何使用

ng include

加载基于某个范围变量的模板。@NewDev是否可以为模板在

ngInclude

中的显示设置动画，或者只插入html？@4lex1v您可以为ngShow/ngHide设置动画，然后，当您将类附加到隐藏/显示的元素时，它们会自动设置动画。您将需要的角度动画模块this@4lex1v是的，有

enter

和

leave

动画用于

ng include

<body ng-app="app">
  <div class='container'>
    <button ng-click='tmpl = true' class='btn btn-info'>Load template!</button>
    <div ng-if='tmpl'>
      <div ng-include="'template.html'"></div>
    </div>
  </div>
</body>