AngularJS 页面内多个 ng-app

2023-11-25

我刚刚开始学习 Angular JS 并创建了一些基本示例,但是我遇到了以下问题。

我创建了 2 个模块和 2 个控制器。

shoppingCart -> ShoppingCartController
namesList -> NamesController

每个控制器都有关联的视图。第一个视图渲染良好,但第二个视图不渲染。没有错误。

http://jsfiddle.net/ep2sQ/

请帮我解决这个问题。

是否有可能在视图中添加控制台来检查从控制器传递的值。

例如在下面的div中我们可以添加console.log并输出控制器值

<div ng-app="shoppingCart" ng-controller="ShoppingCartController">
</div>

因此基本上正如 Cherniv 所提到的,我们需要引导模块以在同一页面内拥有多个 ng-app。非常感谢您的所有投入。

var shoppingCartModule = angular.module("shoppingCart", [])
shoppingCartModule.controller("ShoppingCartController",
  function($scope) {
    $scope.items = [{
      product_name: "Product 1",
      price: 50
    }, {
      product_name: "Product 2",
      price: 20
    }, {
      product_name: "Product 3",
      price: 180
    }];
    $scope.remove = function(index) {
      $scope.items.splice(index, 1);
    }
  }
);
var namesModule = angular.module("namesList", [])
namesModule.controller("NamesController",
  function($scope) {
    $scope.names = [{
      username: "Nitin"
    }, {
      username: "Mukesh"
    }];
  }
);
angular.bootstrap(document.getElementById("App2"), ['namesList']);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>

<div id="App1" ng-app="shoppingCart" ng-controller="ShoppingCartController">
  <h1>Your order</h1>
  <div ng-repeat="item in items">
    <span>{{item.product_name}}</span>
    <span>{{item.price | currency}}</span>
    <button ng-click="remove($index);">Remove</button>
  </div>
</div>

<div id="App2" ng-app="namesList" ng-controller="NamesController">
  <h1>List of Names</h1>
  <div ng-repeat="_name in names">
    <p>{{_name.username}}</p>
  </div>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

AngularJS 页面内多个 ng-app 的相关文章

  • NG 重复后运行指令

    因此 我希望尽可能将我的插件库移至 Angular 以保持一致性 我遇到的问题是在其子级的任何指令运行后获取要运行的指令 只是为了澄清一点 这里的目标是让我们的集成商 仅限 CSS HTML 团队成员 轻松地通过使用功能标记来向项目添加动态
  • 无法在简单的 Yeoman Angular 上使用 grunt

    尝试使用本指南中的步骤通过 Yeoman 启动一个简单的角度应用程序http www sitepoint com kickstart your angularjs development with yeoman grunt and bowe
  • 如何使用 AngularJS 设置页面标题[重复]

    这个问题在这里已经有答案了 我使用以下代码来显示每个 AngularJS 应用程序模板的页面标题 但每当我尝试输入无效的 URL 来测试 otherwise 时 我都会收到以下错误 TypeError Cannot read propert
  • 更新 Angularjs 和 Momentjs 中的“时间之前”值

    原文 我有一个用 ng repeat 生成的表 其中包含数百个条目 其中包含几个不同的 unix 时间戳 我使用 moment js 让它们显示为 19 分钟前 或无论多久之前 例如 我如何每五分钟更新一次 而不必刷新整个表 这需要几秒钟并
  • Selenium 看不到 AngularJS 页面元素

    我在编写 Selenium 测试来检查我的应用程序时遇到问题 我想测试的是 当用户输入正确的登录名 密码时 会显示正确的页面并且用户已登录 主要问题是我的登录表单是作为 AngularJS 指令生成的 我有两个不同的登录页面 并且该指令在两
  • 使用箭头键盘而不是鼠标时,ng-options 模型未更新

    我创建了js小提琴 Fiddle http jsfiddle net reptildarat Z4AN2 3 我创建了一个包含一些 ng options 的表单 当您使用按钮而不是鼠标时 它会出现奇怪的行为 只需单击文本框并按 tab 您可
  • 如何在装有 Chrome 的 MAC 上使用量角器进行复制和粘贴?

    如何在装有 Chrome 的 MAC 上使用量角器进行复制和粘贴 newInput sendKeys protractor Key chord browser controlKey a newInput sendKeys protracto
  • 如何使用 angularjs 动态添加行?

    我使用代码通过单击 添加行 来添加行和 2 列 我的需要是 首先在输入字段中填写值 单击 添加项目 按钮后 值必须显示在表结构中 我是初学者 无法使用 for 循环 任何人都可以解决这个问题吗 尝试代码 https jsfiddle net
  • $routeProvider - 为所有路由注入相同的依赖项

    以下代码 routeProvider when page1 控制器 MyController 解析 策略 StrategyOne 在实例化控制器 MyController 之前等待策略依赖关系得到解决 在我的应用程序中 我有一个返回承诺的函
  • Angularjs ui 路由器。如何重定向到登录页面

    我有4个状态 仪表板 仪表板 main 仪表板 次要 login 仪表板是抽象的 它是 minor 和 main 状态的父状态 下面是我的代码 state dashboard url dashboard abstract true temp
  • AngularJS 控制器内的函数

    我有一个代码片段 其中有一个 Angular 模块化控制器 但同一控制器内有一个函数并带有一个调用 这让我怀疑 Javascript 或 Angular 是否允许这种编码方式 如果是 那么它如何读取它 请参阅我的以下代码格式 obj con
  • 是否可以为 $httpBackend 响应设置通配符?

    假设我在 AngularJS 中有以下测试代码 var someURL var dummyJSON httpBackend whenGET someURL respond dummyJSON 有没有一种方法可以使其成为一组 URL 而不仅仅
  • Angularjs - $http 成功与当时

    我想问一下这个方法有什么区别 我关心的是 then 和 success function 和 error 之间的区别 谢谢 Simple GET request example http method GET url someUrl the
  • 不使用 data-* 前缀的自定义 HTML 属性是否有效? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • Angular UI Grid - 将图像导出为 pdf

    我想将图像添加到 pdf 的标题中 我正在尝试添加已转换为 base64 的图像以导出 Pdf 标题 scope gmGrid exporterPdfHeader margin 30 5 30 15 table widths body MC
  • 从 Rest API 响应内容处置输出中下载 javascript 中的 excel 文件 [对象,对象]

    我想从我的 angularJs 代码下载一个 excel 文件 我向 Java Rest API 发出 http post 请求并返回带有标头的文件 Content Disposition 附件 文件名 new excel file xls
  • Angular ui 路由器状态 - 具有相同模板和控制器的多个状态

    我使用 Angular ui 路由器状态提供程序在 AngularJS 应用程序中定义了如下状态 而且 我想用相同的配置定义多个状态 即 使用相同的模板和控制器 stateProvider state parent templateUrl
  • 选项卡集 $rootScope 范围未更新

    我的屏幕结构如下 UserExperienceScreen
  • 使用像 angularjs 这样的框架对可访问性有什么影响?

    我们的立场 我们正在推动网络可访问性 以便遵守管理公共 教育机构的某些法律 到目前为止 我们一直在确保 我们的布局是按逻辑顺序排列的 图像有alt 标签 但很快我们就意识到我们需要行动起来并认真思考这个问题 我们正在考虑什么 我们一直在关注
  • AngularJS Youtube 播放器嵌入非常大的播放列表

    我目前正在构建一个 AngularJS 应用程序 我知道它有点过时 但我对它很有信心 我的应用程序需要嵌入一个 YouTube 播放器 其中包含一个非常大的播放列表 大约 1500 个项目 但我无法对其进行编码 以便它实际上可以嵌入超过 2

随机推荐