javascript – Angular JS:在另一个ng-include中包含部分HTML

发布时间:2019-12-03 整理:脚本之家
脚本之家收集整理的这篇文章主要介绍了javascript – Angular JS:在另一个ng-include中包含部分HTML脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随脚本之家小编过来看看吧!
我正在使用用Yeoman创建的index.html,它看起来像这样:
<html>
  <head>...</head>
  <body>

    <div ng-include="'views/main.html'"></div>

  </body>
</html>

现在,我知道我不能在另一个ng-include中使用ng-include,所以我甚至不尝试,但这是我想要实现的目标.

我在我的main.html中使用ui.router作为嵌套视图,但是我不能这样做:

<header class="header">
  <!-- Rather long HTML code that I would like to put in
       a separate file like 'views/parts/header.html' -->

</header>

<div ui-view="" class="container"></div>

一个天真的解决方案是消除第一个ng-include并在main.html中使用它来获取页眉,页脚和类似内容.

所以,用你所拥有的东西打我,但不是那个!

编辑:这是我希望拥有的(但不能,因为我已经在ng-include中)

<div ng-include="'views/parts/header.html'"></div>
  <div ui-view="" class="container"></div>

解决方法

如果我理解你,那一切都是可能的.如下所述:

> stateprovider in angularjs – not rendering the ui-view
>并在此plunker中显示

最后,我们可以使用这两个世界,但我们还需要做一件事:

app.controller('MainCtrl',function($scope,$state,....){
   $state.go("/");
});

因为ng-include和ui-router启动不匹配.一旦目标(即我们的< div ng-include =“'views / main.html'”>< / div>的内容)可用,我们就必须强制进行状态重新加载.

注意:期望main.html的内容如下:

<div ng-controller="MainCtrl">
    ...
    <div ui-view></div>
</div>

那应该解决这个问题……

EXTEND:如何重新加入?

这里的ui-router功能似乎是无限的.我们可以*(重新)*在ui-view内部再次使用ng-include.所以不是这样的:

<div ng-include="'views/parts/header.html'"></div>
<div ui-view="" class="container"></div> // e.g. filled by content.html

我们可以将标题移动到视图本身content.html中

<div>
  <div ng-include="'views/parts/header.html'"></div>
</div>

观察here

总结

以上是脚本之家为你收集整理的javascript – Angular JS:在另一个ng-include中包含部分HTML全部内容,希望文章能够帮你解决javascript – Angular JS:在另一个ng-include中包含部分HTML所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

脚本之家官方公众号

微信公众号搜索 “ 程序精选 ” ,选择关注!

微信公众号搜索 “ 程序精选 ” ,选择关注!
精选程序员所需精品干货内容!

脚本之家官方公众号

微信公众号搜索 “ 程序精选 ” ,选择关注!

微信公众号搜索 “ 程序精选 ”
精选程序员所需精品干货内容!