AngularJS multiple ng-app dans une page

je viens de commencer à apprendre L'Angular JS et j'ai créé quelques échantillons de base mais je suis coincé avec le problème suivant.

j'ai créé 2 modules et 2 contrôleurs. 

shoppingCart -> ShoppingCartController
namesList -> NamesController

il y a des vues associées pour chaque contrôleur. La première vue rend fine mais la seconde ne rend pas. Il n'y a pas d'erreurs.

http://jsfiddle.net/ep2sQ/

Aidez-moi S'il vous plaît résoudre ce problème.

est également possible d'ajouter une console en vue de vérifier quelles valeurs sont transmises par le contrôleur.

par exemple dans le div suivant peut-on ajouter console.journal et de sortie les valeurs de contrôleur 

<div ng-app="shoppingCart" ng-controller="ShoppingCartController">
</div>
175
demandé sur thomaux 0000-00-00 00:00:00

2 réponses

donc fondamentalement comme mentionné par Cherniv nous devons bootstrap les modules pour avoir plusieurs ng-app dans la même page. Merci beaucoup pour toutes les entrées. 

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>
182
répondu Nitin Mukesh 2016-04-11 20:48:32

pour exécuter plusieurs applications dans un document HTML, vous devez les démarrer manuellement en utilisant angular.bootstrap ()

HTML 

<!-- Automatic Initialization -->
<div ng-app="myFirstModule">
    ...
</div>
<!-- Need To Manually Bootstrap All Other Modules -->
<div id="module2">
    ...
</div>

JS 

angular.
  bootstrap(document.getElementById("module2"), ['mySecondModule']);

la raison en est qu'une seule application AngularJS peut être automatiquement démarrée par document HTML. Le premier ng-app trouvé dans le document sera utilisé pour définir l'élément racine à auto-amorçage

117
répondu