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 的相关文章

随机推荐