草庐IT

javascript - Angular JS : include partial HTML inside another ng-include

coder 2024-07-25 原文

我使用的是用 Yeoman 创建的 index.html，它看起来像这样:

<html>
  <head>...</head>
  <body>

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

  </body>
</html>

现在，我知道我不能在另一个 ng-include 中使用 ng-include，所以我什至没有尝试，但就是这样我想要实现的目标。

我在我的 ma​​in.html 中使用 ui.router 作为嵌套 View ，但我不能这样做:

<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 并在 ma​​in.html 中将其用于页眉、页脚和类似内容。

所以，用你所拥有的来打我，但不要用那个!

编辑:这是我想要的(但不能，因为我已经在 ng-include 中)

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

最佳答案

如果我对你的理解正确，那一切皆有可能。如此处所述:

最后，我们可以使用两个世界，但我们还必须做一件事:

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这里的力量似乎是无限的。我们可以*(重新)*使用ng-include再次，在ui-view里面.所以不是这个:

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

我们可以将标题移动到 View 本身 content.html 

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

观察 here

关于javascript - Angular JS : include partial HTML inside another ng-include，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25442394/

includejavascriptcodeng-includeangularjsangular-ui-routerangularjs-ng-include

有关javascript - Angular JS : include partial HTML inside another ng-include的更多相关文章

  1. spring.profiles.active和spring.profiles.include的使用及区别说明 - 2

    转自:spring.profiles.active和spring.profiles.include的使用及区别说明下文笔者讲述spring.profiles.active和spring.profiles.include的区别简介说明,如下所示我们都知道，在日常开发中,开发|测试|生产环境都拥有不同的配置信息如：jdbc地址、ip、端口等此时为了避免每次都修改全部信息，我们则可以采用以上的属性处理此类异常spring.profiles.active属性例：配置文件,可使用以下方式定义application-${profile}.properties开发环境配置文件:application-dev

  2. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  3. Ruby on Rails regexp equals-tilde 与 array include 用于检查选项列表 - 2

    我正在使用Rails3.2.3和Ruby1.9.3p0。我发现我经常需要确定某个字符串是否出现在选项列表中。看来我可以使用Ruby数组.includemethod:或正则表达式equals-tildematchshorthand用竖线分隔选项:就性能而言，一个比另一个好吗？还有更好的方法吗？ 最佳答案 总结:Array#include?包含String元素，在接受和拒绝输入时均胜出，对于您的示例只有三个可接受的值。对于要检查的更大的集合，看起来Set#include?和String元素可能会获胜。如何测试我们应该根据经验对此进行测试

  4. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  5. ruby-on-rails - 获取 ActionController::RoutingError(当尝试使用 AngularJS 将数据发布到 Rails 服务器时，没有路由匹配 [OPTIONS] "/users" - 2

    尝试从我的AngularJS端将数据发布到Rails服务器时出现问题。服务器错误:ActionController::RoutingError(Noroutematches[OPTIONS]"/users"):actionpack(4.1.9)lib/action_dispatch/middleware/debug_exceptions.rb:21:in`call'actionpack(4.1.9)lib/action_dispatch/middleware/show_exceptions.rb:30:in`call'railties(4.1.9)lib/rails/rack/logg

  6. ruby - 使用 include 的简短 Ruby Case 语句？不管用 - 2

    我有以下代码，其中有一个小错误，case语句返回值“other”，即使第一个“when”语句评估为true并且应该返回“boats”。我已经关注这个很久了，一定是个小东西。CATEGORY_CLASSES={:boats=>[1,2,3,4,5,6],:houses=>[7,8,9,10],:other=>[11,12,13,14,15,16]}category_id=1category=casecategory_idwhenCATEGORY_CLASSES[:boats].include?(category_id);"boats"whenCATEGORY_CLASSES[:house

  7. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

  8. ruby - 为什么 `include` 在顶层表现不同？ - 2

    我使用以下钩子(Hook)来检查在执行includeFoo时执行包含的模块:moduleFoodefself.included(includer)putsincluderendendModule#include在模块中(通常使用它的地方)与在顶层的行为不同。在模块内部，self是模块，它是Module的一个实例.当我调用include，执行包含的模块是whatself是:moduleBarputsself#=>BarincludeFoo#=>includer:Barend在ruby​​脚本的顶层，self是main，它是Object的一个实例.当我调用include在顶层，包含的模块是

  9. ruby-on-rails - 我将 Rails3 与 tinymce 一起使用。如何呈现用户关闭浏览器javascript然后输入xss？ - 2

    我有一个用Rails3编写的站点。我的帖子模型有一个名为“内容”的文本列。在帖子面板中，html表单使用tinymce将“content”列设置为textarea字段。在首页，因为使用了tinymce，post.html.erb的代码需要用这样的原始方法来实现。.好的，现在如果我关闭浏览器javascript，这个文本区域可以在没有tinymce的情况下输入，也许用户会输入任何xss，比如alert('xss');.我的前台会显示那个警告框。我尝试sanitize(@post.content)在posts_controller中，但sanitize方法将相互过滤tinymce样式。例如

  10. ruby - 使用 Selenium WebDriver 启用/禁用 javascript - 2

    出于某种原因，我必须为Firefox禁用javascript(手动，我们按照提到的步骤执行http://support.mozilla.org/en-US/kb/javascript-settings-for-interactive-web-pages#w_enabling-and-disabling-javascript)。使用Ruby的SeleniumWebDriver如何实现这一点？ 最佳答案 是的，这是可能的。而是另一种方式。您首先需要查看链接Selenium::WebDriver::Firefox::Profile#[]=

随机推荐