Angular JS only one controller working when i used multiple controllers in a single page
Question
Problem in handling two controller As am a learner to angular Js this is where i got my confusion
I wrote two with two different apps and controllers and apps as I have learnt we can define multiple of these in a single page.
The first part div which is
<div ng-app="myApp" ng-controller="personCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{fullName()}}
</div>
worked well
When I used with two controllers like this
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="personCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{fullName()}}
</div>
<br><br>
<div ng-app="myApp1" ng-controller="personCtrl1">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{fullName()}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
};
});
var app1 = angular.module('myApp1', []);
app1.controller('personCtrl1', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
};
});
</script>
</body>
</html>
This is what the problem is
5 answers
solution1
4 2017-02-08 11:21:02
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.
From https://docs.angularjs.org/api/ng/directive/ngApp
You have two ng-app in your example, put both controllers in the same module (for example myApp) and you'll be fine
solution2
3 ACCPTED 2017-02-08 11:22:30
Give an id to your second div and add this line:
angular.bootstrap(document.getElementById("myApp1"), ['myApp1']);
solution3
1 2017-02-08 11:30:33
This is not the standard practice. You are basically using two application modules on the same page. You should instead have the format as following:
- ng-app
- ng-controller-1
- ng-controller-2
I have made the following fiddle for you to review. https://jsfiddle.net/kaminasw/U3pVM/29864/
HTML
<div ng-app="myApp">
<div ng-controller="personCtrl">
First Name:
<input type="text" ng-model="firstName">
<br> Last Name:
<input type="text" ng-model="lastName">
<br>
<br> Full Name: {{fullName()}}
</div>
<br>
<br>
<div ng-controller="personCtrl1">
First Name:
<input type="text" ng-model="firstName">
<br> Last Name:
<input type="text" ng-model="lastName">
<br>
<br> Full Name: {{fullName()}}
</div>
</div>
JS
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
};
});
app.controller('personCtrl1', function($scope) {
$scope.firstName = "Jane";
$scope.lastName = "Doe";
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
};
});
solution4
0 2017-02-08 11:38:37
You should bind the controllers to the same app, and not create seperate apps.
See this Fiddle: https://jsfiddle.net/q07scy6k/
HTML:
<div ng-app="myApp">
<div ng-controller="personCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{fullName()}}
</div>
<br><br>
<div ng-controller="personCtrl1">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{fullName()}}
</div>
</div>
Javascript:
var app = angular.module('myApp', []);
app.controller('personCtrl', function ($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
scope.fullName = function () {
return $scope.firstName + " " + $scope.lastName;
};
});
app.controller('personCtrl1', function ($scope) {
$scope.firstName = "Jane ";
$scope.lastName = "Doe";
$scope.fullName = function () {
return $scope.firstName + " " + $scope.lastName;
};
});
solution5
0 2017-02-08 11:43:40
The trick is to use bootstrapper to bootstrap the second or third app. Also, this has to be done after it has been defined.
angular.bootstrap(document.getElementById("myApp2"), ['myApp2']);
Here is a working example of your code.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script> var app1 = angular.module('myApp', []); app1.controller('personCtrl', function($scope) { $scope.firstName = ""; $scope.lastName = ""; $scope.fullName = function() { return $scope.firstName + " " + $scope.lastName; } }); var app2 = angular.module('myApp2', []); app2.controller('personCtrl', function($scope) { $scope.firstName = ""; $scope.lastName = ""; $scope.fullName = function() { return $scope.firstName + $scope.lastName; } }); </script> <div ng-app="myApp" ng-controller="personCtrl" class="col-xs-6"> First Name: <input type="text" ng-model="firstName"> <br>Last Name: <input type="text" ng-model="lastName"> <br>App 1: Full Name: {{fullName()}} </div> <div ng-app="myApp2" ng-controller="personCtrl" id="myApp2" class="col-xs-6"> First Name: <input type="text" ng-model="firstName"> <br>Last Name: <input type="text" ng-model="lastName"> <br>App 2: Full Name: {{fullName()}} </div> <script> angular.bootstrap(document.getElementById("myApp2"), ['myApp2']); </script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.