AngularJS 1.3.8 Using multiple controllers, second controller is not working
How do you use multiple controllers for AngularJS 1.3.8?
I've tried the following below but only the first controller outputs correctly and the second controller outputs with {{ name }} and {{ age }} .
HTML:
<div ng-app="app" ng-controller="Ctrl">
<label>Name:</label>
<input ng-model="name">
<label>Age:</label>
<input ng-model="age">
<h1>{{ name }}</h1>
<h1>{{ age * 2 }}</h1>
</div>
<div ng-app="app2" ng-controller="Ctrl2">
<label>Name:</label>
<input ng-model="name">
<label>Age:</label>
<input ng-model="age">
<h1>{{ name }}</h1>
<h1>{{ age }}</h1>
</div>
<script>
angular.module('app', [])
.controller('Ctrl', ['$scope', function($scope) {
$scope.name = "Jason";
$scope.age = "21";
$scope.$watch('name', function(){ // Logs the amount of times name changes
console.log($scope.name);
});
}]);
</script>
<script>
angular.module('app2', [])
.controller('Ctrl2', ['$scope', function($scope) {
$scope.name = "John";
$scope.age = "22";
}]);
</script>
You cannot have more than 1 ng-app directive in the same document. You would need to manually bootstrap the other. Other wise only the first instance of ng-app will be bootstrapped automatically by angular.
Other issue is that there is no provider called $scope2 , you need to inject $scope .
Example:-
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<div ng-app="app" ng-controller="Ctrl">
<label>Name:</label>
<input ng-model="name">
<label>Age:</label>
<input ng-model="age">
<h1>{{ name }}</h1>
<h1>{{ age * 2 }}</h1>
</div>
<div id="app2" ng-controller="Ctrl2">
<label>Name:</label>
<input ng-model="name">
<label>Age:</label>
<input ng-model="age">
<h1>{{ name }}</h1>
<h1>{{ age }}</h1>
</div>
<script>
angular.module('app', [])
.controller('Ctrl', ['$scope',
function($scope) {
$scope.name = "Jason";
$scope.age = "21";
$scope.$watch('name', function() { // Logs the amount of times name changes
console.log($scope.name);
});
}
]);
</script>
<script>
angular.module('app2', [])
.controller('Ctrl2', ['$scope',
function($scope) {
$scope.name = "John";
$scope.age = "22";
}
]);
angular.element(document).ready(function() {
angular.bootstrap(document.getElementById('app2'), ['app2']);
});
</script>
Demo
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<div ng-app="app" ng-controller="Ctrl">
<label>Name:</label>
<input ng-model="name">
<label>Age:</label>
<input ng-model="age">
<h1>{{ name }}</h1>
<h1>{{ age * 2 }}</h1>
</div>
<div id="app2" ng-controller="Ctrl2">
<label>Name:</label>
<input ng-model="name">
<label>Age:</label>
<input ng-model="age">
<h1>{{ name }}</h1>
<h1>{{ age }}</h1>
</div>
<script>
angular.module('app', [])
.controller('Ctrl', ['$scope',
function($scope) {
$scope.name = "Jason";
$scope.age = "21";
$scope.$watch('name', function() { // Logs the amount of times name changes
console.log($scope.name);
});
}
]);
</script>
<script>
angular.module('app2', [])
.controller('Ctrl2', ['$scope',
function($scope) {
$scope.name = "John";
$scope.age = "22";
}
]);
angular.element(document).ready(function() {
angular.bootstrap(document.getElementById('app2'), ['app2']);
});
</script>为什么不为1个应用程序定义2个控制器？
<!DOCTYPE html>
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body ng-app="myApp" >
<p>Person</p>
<div ng-controller="myCtrl">
First name <input type="text" ng-model="firstName"><br>
Last name <input type="text" ng-model="lastName"><br>
Birthday <input type="date" ng-model="birthday"><br>
{{firstName+' '+lastName}} was born on {{birthday}}
</div>
<div ng-controller="myCtrl2" ng-init="">
<p>The third result is {{ points[2] }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
$scope.birthday= new Date();
});
app.controller('myCtrl2', function($scope) {
$scope.points=[1,15,19,2,40];
});
</script>
</body>
</html>上一篇: 角度嵌套指令不在模型中显示新实体