admin管理员组文章数量:1389604
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=".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
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./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
Share Improve this question asked Feb 8, 2017 at 11:18 KishanCSKishanCS 1,3772 gold badges19 silver badges41 bronze badges 1- 1 This might help as well:stackoverflow./questions/18571301/… – Aakash Thakur Commented Feb 8, 2017 at 11:26
5 Answers
Reset to default 4Give an id to your second div and add this line:
angular.bootstrap(document.getElementById("myApp1"), ['myApp1']);
http://jsfiddle/ADukg/9952/
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/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
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/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;
};
});
You should bind the controllers to the same app, and not create seperate apps.
See this Fiddle: https://jsfiddle/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;
};
});
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./ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./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>本文标签：
版权声明：本文标题：javascript - Angular JS only one controller working when i used multiple controllers in a single page - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744629797a2616467.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论