Stefano Rueda Stefano Rueda - 1 month ago 11
AngularJS Question

Second controller won't work in my angular js

I search all on how to have two controllers, but it won't work. Is there anything wrong in my HTML? Is there anything wrong in my script?

Javascript code:

<script>

var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
$scope.products = [];
$scope.addItem = function () {
$scope.errortext = "";
if (!$scope.addMe) {return;}
if ($scope.products.indexOf($scope.addMe) == -1) {
$scope.products.push($scope.addMe);
} else {
$scope.errortext = "The item is already in your shopping list.";
}
}
$scope.removeItem = function (x) {
$scope.errortext = "";
$scope.products.splice(x, 1);
}
});


var topics = angular.module("myList", []);
topics.controller("topicCtrl", function($scope) {
$scope.products = [];
$scope.addItem = function () {
$scope.errortext = "";
if (!$scope.addMe) {return;}
if ($scope.products.indexOf($scope.addMe) == -1) {
$scope.products.push($scope.addMe);
} else {
$scope.errortext = "The item is already in your shopping list.";
}
}
$scope.removeItem = function (y) {
$scope.errortext = "";
$scope.products.splice(x, 1);
}
});

angular.bootstrap(document.getElementById("app2"), ['myList']);

function addElement(value)
{
var dropdown = document.getElementById("OperationType");
var current_value = dropdown.options[dropdown.selectedIndex].value;

if (current_value == "Others") {
document.getElementById("OperationNos").style.display = "block";
}
else {
document.getElementById("OperationNos").style.display = "none";
}
}

function addElement2(value)
{
var dropdown = document.getElementById("topic");
var current_value = dropdown.options[dropdown.selectedIndex].value;

if (current_value == "Others") {
document.getElementById("usr").style.display = "block";
}
else {
document.getElementById("usr").style.display = "none";
}
}




HTML CODE:

<!--STANDARDS -->
<td>
<div ng-app="myShoppingList" ng-controller="myCtrl" id="app1" class="panel panel-default" style="max-width:400px;">

<div class="panel-heading">
<h3>
<select name="type" class="form-control" id="OperationType" onchange="addElement(this.value)" name="location">
<option value="Teacher">Teacher</option>
<option value="Coordinator">Coordinator</option>
<option value="Others">Others</option>
</select>
<input type="text" id="OperationNos"style="border: none;"class="form-control" placeholder="Input Title" value="{{x}}" >
</h3>
</div>

<div class="panel-body">
<ul class="list-group">
<li ng-repeat="x in products" class="list-group-item">
<input type="text" style="border: none;"class="form-control" value="{{x}}" id="usr">
<span ng-click="removeItem($index)" style="cursor:pointer;" class="text-right">×</span>
</li>
</ul>
</div>

<div class="panel-footer">
<div class="row">
<div class="col-md-12">
<div class="input-group">
<input type="text" class="form-control" ng-model="addMe" placeholder="Add description">
<span class="input-group-btn">
<button class="btn btn-secondary btn-success" ng-click="addItem()" type="button">Add</button>
</span>
</div>
</div>
</div>
<p class="w3-padding-left w3-text-red">{{errortext}}</p>
</div>
</div>
</td>
<!-- END OF STANDARDS -->
<!--TOPICS -->
<td>
<div ng-app="myList" ng-controller="topicCtrl" id="app2" class="panel panel-default" style="max-width:400px;">

<div class="panel-heading">
<h3>
<select name="type" class="form-control" id="topic" onchange="addElement2(this.value)" name="topic">
<option value="Teacher">Teacher</option>
<option value="Coordinator">Coordinator</option>
<option value="Others">Others</option>
</select>
<input type="text" id="topics"style="border: none;"class="form-control" placeholder="Input Title" value="{{y}}" ></h3>
</div>

<div class="panel-body">
<ul class="list-group">
<li ng-repeat="y in products" class="list-group-item">
<input type="text" style="border: none;"class="form-control" value="{{y}}" id="usr">
<span ng-click="removeItem($index)" style="cursor:pointer;" class="text-right">×</span>
</li>
</ul>
</div>

<div class="panel-footer">
<div class="row">
<div class="col-md-12">
<div class="input-group">
<input type="text" class="form-control" ng-model="addMe" placeholder="Add description">
<span class="input-group-btn">
<button class="btn btn-secondary btn-success" ng-click="addItem()" type="button">Add</button>
</span>
</div>
</div>
</div>
<p class="w3-padding-left w3-text-red">{{errortext}}</p>
</div>
</div>
</td>
<!-- END OF TOPICS -->

Answer

See the angularjs doc

  • only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application.
  • To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap instead.
  • AngularJS applications cannot be nested within each other.
  • Do not use a directive that uses transclusion on the same element as ngApp. This includes directives such as ngIf, ngInclude and ngView. Doing this misplaces the app $rootElement and the app's injector, causing animations to stop working and making the injector inaccessible from outside the app.