AngularJS在一个页面内的多个ng-app

发布时间：2020-12-17 09:22:16 所属栏目：安全来源：网络整理

导读：我刚刚开始学习Angular JS并创建了一些基本的示例，但我遇到以下问题。我创建了2个模块和2个控制器。 shoppingCart - ShoppingCartControllernamesList - NamesController 每个控制器都有相关的视图。第一个视图呈现精细，但第二个不呈现。没有错误。 http:

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

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

shoppingCart -> ShoppingCartController
namesList -> NamesController

每个控制器都有相关的视图。第一个视图呈现精细，但第二个不呈现。没有错误。

http://jsfiddle.net/ep2sQ/

请帮我解决这个问题。

也有任何可能性在View中添加控制台，以检查从Controller传递的值。

例如在下面的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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!