AngularJS multiple ng-app dentro de uma página
Comecei a aprender JS angulares e criei algumas amostras básicas, mas estou preso ao seguinte problema.
Criei 2 módulos e 2 controladores.
shoppingCart -> ShoppingCartController
namesList -> NamesController
Existem vistas associadas para cada controlador. A primeira vista rende bem, mas a segunda não é renderização. Não há erros.
Por favor, ajude-me a resolver este problema.Também existe alguma possibilidade de adicionar consola para verificar que valores são passados do Controller.
Por exemplo, no seguinte div podemos adicionar consola.registar e enviar os valores do controlador<div ng-app="shoppingCart" ng-controller="ShoppingCartController">
</div>
175
2 answers
Então, basicamente como mencionado por Cherniv, precisamos inicializar os módulos para ter vários ng-app dentro da mesma página. Muito obrigado por todas as entradas.
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
Author: Nitin Mukesh, 2016-04-11 20:48:32
Para executar várias aplicações num documento HTML, deverá inicializá-las manualmente usando o 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']);
A razão para isto é que apenas uma aplicação AngularJS pode ser automaticamente activada por documento HTML. O primeiro ng-app
encontrado no documento será usado para definir o elemento raiz do auto-bootstrap como