AngularJS 中的嵌套模块

2024-05-11

我有 2 个不同的 AngularJs 模块:一个 widgetContainer 和一个 widget。

小部件可以显示为独立的应用程序,也可以包含在小部件容器中。一个 widgetContainer 包含 0-N 个 widget。

如果我尝试将小部件模块引导到小部件容器中,角度会抛出以下错误:

错误:[ng:btstrpd] 应用程序已使用此元素“

”进行引导http://errors.angularjs.org/1.5.8/ng/btstrpd?p0=%26lt%3Bdiv%20id%3D%22childApp%22%26gt%3B http://errors.angularjs.org/1.5.8/ng/btstrpd?p0=%26lt%3Bdiv%20id%3D%22childApp%22%26gt%3B

我已重现此错误这个笨蛋 http://plnkr.co/edit/PBIyADrP0VpbDBBfen1b?p=preview

<div id="parentApp">
<div ng-controller="MainParentCtrl">
  Hello {{name}} !
  <div id="childApp">
    <div ng-controller="MainChildCtrl">
      Hello {{childName}} !
    </div>
  </div>
</div>

EDIT :

使用依赖注入可以有效地解决问题。

现在,我需要从指令加载小部件。

parentApp.directive('widget', [function() {
  return {
    restrict: 'E',
    link: function($scope, $element, $attr) {

      var div = document.createElement('div');
      div.setAttribute("ng-controller", "MainChildCtrl");
      div.innerHTML = 'Hello {{childName}} !';
      $element.append(angular.element(div));

    }
  };
}]);

div 已创建,但 childApp 模块未加载到内部。 我已经更新了我的plunker http://plnkr.co/edit/PBIyADrP0VpbDBBfen1b?p=preview


不要尝试引导两个模块。而是使用依赖注入。您只在 html 中声明一个模块,然后使用角度代码使该模块依赖于另一个模块。看这里:https://docs.angularjs.org/guide/concepts#module https://docs.angularjs.org/guide/concepts#module

这是您更新的 plunker:http://plnkr.co/edit/DJvzpCoxLRhyBl77S27k?p=preview http://plnkr.co/edit/DJvzpCoxLRhyBl77S27k?p=preview

HTML:

<body>
  <div id="childApp">
    <div ng-controller="MainParentCtrl">
      Hello {{name}} !
      <div>
        <div ng-controller="MainChildCtrl">
          Hello {{childName}} !
        </div>
      </div>
    </div>
  </div>
</body>

AngularJS:

var parentApp = angular.module('parentApp', [])
  .controller('MainParentCtrl', function($scope) {
    $scope.name = 'universe';
  });



var childApp = angular.module('childApp', ['parentApp'])
  .controller('MainChildCtrl', function($scope) {
    $scope.childName = 'world';
  });


angular.element(document).ready(function() {
  angular.bootstrap(document.getElementById('childApp'), ['childApp']);
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

AngularJS 中的嵌套模块 的相关文章

  • 显示具有多个父代的 D3 树

    我目前有this http bl ocks org mbostock 4339083图已实现 我希望在描述具有多个父节点的子节点时保持结构和可折叠性 有没有办法做到这一点 我研究了力图 但我也想保留一组层次结构 这意味着 1 级的父级可以有
  • 如何在量角器中模拟拖放动作?

    我有一个双滑块 我想测试它是否可操作并返回正确的数据 滑块有一个最小和一个最大处理程序 它还有一些 我可以挂钩的断点 我想要模拟的是 handler max 元素的 touchStart 将拇指移动到类为 step 3 的元素上 handl
  • 如何在没有 jQuery 的情况下删除 Javascript 中的元素

    我试图通过以下方式从 DOM 中删除 Div a 标签嵌套在其中 我想我正在寻找的是 jQuery 的纯 Javascript 版本 div remove 这是html设置 div a href Click me to remove the
  • 为什么 window 与 Internet Explorer 中的 window.self 不同?

    关于我如何遇到这个问题有一个复杂的背景故事 但为什么self属性不完全等于窗口本身 在 Safari 和 Firefox 及其朋友中 结果如我所料 gt window window self true gt window window se
  • 想要动态处理与分页相关的页码显示:ReactJS

    我有一些分页逻辑工作得很好 唯一的问题是我只能让它显示并固定数量的页面可供选择 现在我已经把它放到了 5 页 但我希望它能够根据总记录动态更改 假设我有 100 条记录 每页限制为 10 条 将有 10 页 现在我只能让它以这种方式显示 第
  • 如何使用javascript确保元素仅在圆上朝一个方向移动?

    好吧 我承认我对三角学真的很糟糕 出于上下文的考虑 我将添加我在这里提到的问题中的内容 参考问题 https stackoverflow com a 39429290 168492 https stackoverflow com a 394
  • 如何在网站上使用 svg 元素制作块的屏幕截图?

    我在网站上创建了一个构造函数 其本质是将所选元素及其颜色 svg中的元素 添加到访问者选择的背景和背景颜色 png中的背景 中 然后必须单击 保存 结果 按钮并仅执行工作区的屏幕截图 我写了这个脚本 但它需要屏幕截图 但只有背景 并忽略选定
  • IntersectionObserver是否支持水平滚动观察?

    我制作了几个垂直滚动 IntersectionObserver 模块 但我对水平滚动感兴趣 根将是 div 观察目标将是 img 我想观察当 img 放大但 div 保持视口宽度时的变化 我什至不确定移动 Safari 是否会将缩放后的图片
  • ReactTransitionGroup 不适用于 React-redux 连接组件

    我正在开发一个更大的项目 但我创建了这个简短的示例来说明问题 如果我使用Box组件 它的工作原理 它在控制台中输出componentWillEnter and componentWillLeave当我们点击按钮时 如果我使用BoxConta
  • $exceptionHandler 中的 $location - 依赖冲突

    我正在尝试实现一个非常标准的任务 当发生异常时 重定向到我的 error page 代码的简化形式如下所示 app factory exceptionHandler location function location return fun
  • 如何正确取消引用然后删除 JavaScript 对象?

    我想知道从内存中完全取消引用 JavaScript 对象的正确方法 确保删除时不会在内存中悬空 并且垃圾收集器会删除该对象 当我看这个问题时在 JavaScript 中删除对象 https stackoverflow com questio
  • 如何计算特定字符在字符串中出现的次数

    我正在尝试创建一个函数来查看数组中的任何字符是否在字符串中 如果是 有多少个 我尝试计算每一种模式 但是太多了 我尝试使用 Python 中的 in 运算符的替代方案 但效果不佳 function calc fit element var
  • LeafleteachLayer函数不会迭代所有Layer

    使用 GeoJSON 数据数组创建一些标记 getJSON GetLocationsServlet function data L geoJSON data onEachFeature onEachFeature addTo mymap G
  • 传递给 $resource 的 @id 是什么?

    resource entries id id id update method PUT id是什么 在 资源上doc page http docs angularjs org api ngResource 24resource下面有人这么说
  • Vaadin 12 将对象传递给 JavaScript 函数:无法对类进行编码

    Vaadin 12 Kotlin 项目 In my myPage html我有JavaScript myObject redirectToCheckout sessionId 1111 2222 所以我需要调用javaScript函数red
  • $resource.query 返回分割字符串(字符数组)而不是字符串

    我正在使用像下面这样的 Angular resource angular module app factory data function resource var Con resource api data update method P
  • Highcharts jQuery 渲染问题 - 所有浏览器

    我在尝试使用构建堆积柱形图时遇到了一个奇怪的问题高图表 http www highcharts com 当图表呈现时 在您调整浏览器大小之前 不会显示列无论如何 导致图表重绘 我认为 图表的其余部分显示 轴 标题等 但不显示列本身 我在 I
  • 使用 next.js 进行服务器端渲染与传统 SSR

    我非常习惯 SSR 意味着页面得到完全刷新并从服务器接收完整 HTML 的方法 其中根据后端堆栈使用 razor pub other 进行渲染 因此 每次用户单击导航链接时 它只会向服务器发送请求 整个页面将刷新 接收新的 HTML 这就是
  • 将数组从 jquery ajax 传递到代码后面

    我必须将二维数组传递给在asp net网页代码后面编写的页面方法我有一个变量objList作为二维数组 我使用以下代码来实现此目的 但没有成功 并且未调用页面方法 脚本语言 function BindTable objList ajax u
  • 没有输入的 jQuery 日期选择器

    我有一个相当复杂的网络应用程序 我想向其中添加一些日期选择 UI 我遇到的问题是我无法从文档中弄清楚如何真正控制日期选择器的出现方式和时间 不涉及任何表单元素 不 我不会添加秘密表单字段 因此简单的开箱即用方法根本行不通 我希望有人可以提供

随机推荐

  • jQuery异步ajax查询和返回值问题(范围、闭包)

    由于异步查询和变量范围问题 代码无法正常工作 我不明白如何解决这个问题 使用 async false 更改为 ajax 方法 不是一个选项 我知道闭包 但我如何在这里实现它 不知道 我已经在这里看到了有关 js 中的闭包和 jQuery 异
  • Win7下Jupyter Notebook中撤消文本输入

    我很惊讶我没有在 Win7 下的 Jupyter Notebook 上或在网络上找到这个问题的答案 我只是错误地覆盖了调用块的大部分 但不是全部 自动保存可以追溯到之前的一些我不想恢复的更改 Jupyter Notebook 中文本输入的撤
  • android中ScrollView中的图像

    在我的应用程序中 我想放置一个 png 文件 并且希望它在横向和纵向模式下都被视为滚动图像 请建议代码或示例 要使您的 Imageview 在高度不适合时滚动 您可以在 xml 中的 ScrollView 内添加一个 ImageView 并
  • 即使在 Excel 2007 中插入行时也保持绝对引用

    我有一个电子表格 我希望单元格公式始终查看特定单元格 即使插入行或列并且特定单元格移动也是如此 实际上 我总是想查看表格的 顶部 单元格 即使在表格顶部插入了新行 例如 单元格 A2 的公式为 E 2 现在我突出显示第 1 行并执行 插入行
  • std::make_pair 与浮点数组(float2,无符号整数)

    我有一个用 float2 unsigned int 对模板化的向量 例如 std vector
  • 当我们第一次部署 WAR 文件时,某些代码可以运行吗?

    是否有任何方法或 API 可以使用 以便每当我部署新的 WAR 文件时 部分代码都应该执行 或者当 Tomcat 启动时 相应的 servlet 应该连续启动或运行一些代码 恢复一个老问题 因为唯一的答案没有显示任何例子 为了在部署 取消部
  • 返回即将推出的 YouTube API V3 视频安排日期?

    我想要返回 YouTube 中的直播的安排日期 Example of scheduled streams YT链接 https www youtube com channel UCP7jMXSY2xbc3KCAE0MHQ A https w
  • Pandas 使用什么规则来生成视图和副本?

    我对 Pandas 在决定数据帧中的选择是原始数据帧的副本或原始数据帧的视图时使用的规则感到困惑 例如 如果我有 df pd DataFrame np random randn 8 8 columns list ABCDEFGH index
  • Inno Setup安装先决条件[重复]

    这个问题在这里已经有答案了 我正在通过 Inno Setup 创建一个安装程序 我看到很多关于如何检测先决条件是否存在的代码示例 但没有任何关于当我找不到先决条件时如何实际安装先决条件的代码示例 我确信它非常简单 但是我该如何安装先决条件呢
  • 原子存储抛出错误

    我最近升级到了 C 11 兼容编译器 并且尝试将一些代码从 boost 更新到 c 11 标准 我在使用atomic store转换一些代码时遇到了问题 这是一些简单的测试代码 似乎会引发编译器错误 int main std shared
  • 在 grpc python 中处理异步流请求

    我试图了解如何使用双向流处理 grpc api 使用 Python API 假设我有以下简单的服务器定义 syntax proto3 package simple service TestService rpc Translate stre
  • 检测反射 DLL 注入

    在过去的几年中 恶意软件 以及一些渗透测试工具 如 Metasploit 的 meterpreter 负载 已经开始使用反射 DLL 注入 PDF http www harmonysecurity com files HS P005 Ref
  • 如何在 C++ 和 QML 应用程序中使用 qrc?

    我在 Windows7 上用 c qnd Qt Creator QML 编写了 Qt Quick Desktop 应用程序 现在 我必须部署它 并且我需要隐藏 qml 文件和图像 意味着 将它们放入资源等中 我读到有一个很好的方法可以使用
  • libgdx SpriteBatch 渲染到纹理

    是否可以使用 libGdx 适用于 Android 桌面的 Java 引擎 中的 SpriteBatch 渲染到纹理 如果是这样 怎么办 基本上我想将所有内容渲染到 512 x 256 纹理的 320 x 240 区域 然后缩放区域以适合屏
  • ES6 模板文字可以在运行时替换(或重用)吗?

    tl dr 是否可以制作可重用的模板文字 我一直在尝试使用模板文字 但我想我就是不明白 现在我感到沮丧 我的意思是 我想我明白了 但 它 不应该是它的运作方式 或者它应该如何实现 它应该变得不同 我看到的所有示例 甚至标记模板 都要求 替换
  • asp.net core http 如果没有内容类型标头,则删除 `FromBody` 忽略

    我在 http 中使用 bodyDELETE要求 我知道目前删除主体是非标准的 但是允许的 使用时出现问题HttpClient它不允许删除请求的正文 我知道我可以使用SendAsync 但我宁愿让我的 API 更加灵活 我希望这个机构是可选
  • 如何在 Objective-C 标头中引用 Swift 枚举

    有没有办法从 Objective C 标头引用 Swift 枚举 如果你想在 Objective C 头中查看 Swift 类 你可以使用 objc class Foo 我没有看到枚举有任何类似的东西 你想做的事情叫做forward dec
  • CPU寄存器和多任务处理

    我目前正在学习汇编 我很困惑 CPU 寄存器如何与多任务一起工作 所以在多任务系统中 CPU可以随时暂停某个程序的执行并运行另一个程序 那么在这一步中寄存器值是如何保存的呢 寄存器是压入堆栈还是以其他方式 CPU 寄存器如何与多任务一起工作
  • 如何使用ElasticSearch来实现社交搜索?

    我正在尝试使用 ElasticSearch 创建具有社交功能的商业搜索 我有一个企业目录 用户可以通过不同的方式与这些企业进行交互 通过查看它们 检查它们等 当用户搜索商家时 我希望能够在结果顶部向他们显示他们的朋友与之互动过的商家 或根据
  • AngularJS 中的嵌套模块

    我有 2 个不同的 AngularJs 模块 一个 widgetContainer 和一个 widget 小部件可以显示为独立的应用程序 也可以包含在小部件容器中 一个 widgetContainer 包含 0 N 个 widget 如果我