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>
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>
2 Answers
Reset to default 5You 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./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./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>If your intention is to use just one module and bind other controllers to it. Then just have one ng-app and register your controller to app1.
Create a module:
angular.module('app', []);
Register a controller:
angular.module('app').controller('Ctrl1', ctor);
Demo
<script src="https://ajax.googleapis./ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<div ng-app="app">
<div 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-controller="Ctrl2">
<label>Name:</label>
<input ng-model="name">
<label>Age:</label>
<input ng-model="age">
<h1>{{ name }}</h1>
<h1>{{ age }}</h1>
</div>
</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);
});
}
]).controller('Ctrl2', ['$scope',
function($scope) {
$scope.name = "John";
$scope.age = "22";
}
]);;
</script>Why not just define 2 controllers for 1 app?
<!DOCTYPE html>
<html>
<head>
<script src= "http://ajax.googleapis./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>发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744976302a4604164.html
评论列表（0条）