nekoMiaChan
Reputation: 181
angular js 2nd controller not working
I have a problem with the 2nd controller(RegisterController) I've defined in my module. The first one works fine though. I have 2 controllers in a file named user.js
var app = angular.module("User", []);
app.controller('LoginController', ['$scope', '$http',
function($scope, $http) {
$scope.user = {
email: '[email protected]',
password: '',
username: 'sex',
};
$scope.login = function() {
return $http.post('http://localhost/cw/index.php/rest/resource/user/action/login', $scope.user).then(function successCallback(response) {
if (response.data.success == 'true') {
}
}, function errorCallback(response) {
});;
}
}
]);
app.controller('RegisterController', ['$scope', '$http',
function($scope, $http) {
$scope.user = {
email: '[email protected]',
password1: 'lol',
password2: '',
username: 'blah',
profile_picture: '',
dobDay: '',
dobMonth: '',
dobYear: '',
};
$scope.submit = function() {
alert("submit");
}
}
]);<table>
<tr>
<td>
<span>
<table style="text-align: right" ng-app="User" ng-controller="LoginController">
<tr>
<td>
Email
</td>
<td>
<input type="text" ng-bind="user.email" ng-model="user.email">
</td>
</tr>
<tr>
<td>
Password
</td>
<td>
<input type="password" ng-bind="user.password" ng-model="user.password">
</td>
</tr>
<tr>
<td></td>
<td style="float:left">
<button ng-click="login()">login</button>
</td>
</tr>
</table>
</span>
</td>
<td>
<div style="border-left:1px solid">
<table style="text-align: left" ng-app="User" ng-controller="RegisterController">
<tr>
<td>
Username
</td>
<td>
<input type="text" ng-bind="user.username" ng-model="user.username">
</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>
Email
</td>
<td>
<input type="email" ng-bind="user.email" ng-model="user.email">
</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>
Password
</td>
<td>
<input type="text" ng-bind="user.password1" ng-model="user.email">
</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>
Retype password
</td>
<td>
<input type="text" ng-bind="user.password2" ng-model="user.password">
</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>
Date of Birth
</td>
<td>
<input type="text" ng-bind="user.dobDay" ng-model="user.password" value="DD" size="2" maxlength="2">
<input type="text" ng-bind="user.dobMonth" ng-model="user.password" value="MM" size="2" maxlength="2">
<input type="text" ng-bind="user.dobYear" ng-model="user.password" value="YYYY" size="4" maxlength="4">
</td>
</tr>
<tr>
<td>
Profile picture
</td>
<td>
<input type="file" ng-bind="profile_picture">
</td>
</tr>
<tr>
<td></td>
<td style="float:left">
<button ng-click="submit()">Submit</button>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
Even the button click does nothing. What is the problem here? I'm new to Angular js. Any help is appreciated.
Upvotes: 0
Views: 66
Answers (1)
Azad
Reputation: 5264
- insert your
ng-app="User"inot table element- remove other
ng-app="User"instances. - you can define
ng-apponly once for using no of controllers.
- remove other
var app = angular.module("User", []);
app.controller('LoginController', ['$scope', '$http',
function($scope, $http) {
$scope.user = {
email: '[email protected]',
password: '',
username: 'sex',
};
$scope.login = function() {
return $http.post('http://localhost/cw/index.php/rest/resource/user/action/login', $scope.user).then(function successCallback(response) {
if (response.data.success == 'true') {
}
}, function errorCallback(response) {
});;
}
}
]);
app.controller('RegisterController', ['$scope', '$http',
function($scope, $http) {
$scope.user = {
email: '[email protected]',
password1: 'lol',
password2: '',
username: 'blah',
profile_picture: '',
dobDay: '',
dobMonth: '',
dobYear: '',
};
$scope.submit = function() {
alert("submit");
}
}
]);<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="User">
<table>
<tr>
<td>
<span>
<table style="text-align: right" ng-controller="LoginController">
<tr>
<td>
Email
</td>
<td>
<input type="text" ng-bind="user.email" ng-model="user.email">
</td>
</tr>
<tr>
<td>
Password
</td>
<td>
<input type="password" ng-bind="user.password" ng-model="user.password">
</td>
</tr>
<tr>
<td></td>
<td style="float:left">
<button ng-click="login()">login</button>
</td>
</tr>
</table>
</span>
</td>
<td>
<div style="border-left:1px solid">
<table style="text-align: left" ng-controller="RegisterController">
<tr>
<td>
Username
</td>
<td>
<input type="text" ng-bind="user.username" ng-model="user.username">
</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>
Email
</td>
<td>
<input type="email" ng-bind="user.email" ng-model="user.email">
</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>
Password
</td>
<td>
<input type="text" ng-bind="user.password1" ng-model="user.email">
</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>
Retype password
</td>
<td>
<input type="text" ng-bind="user.password2" ng-model="user.password">
</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>
Date of Birth
</td>
<td>
<input type="text" ng-bind="user.dobDay" ng-model="user.password" value="DD" size="2" maxlength="2">
<input type="text" ng-bind="user.dobMonth" ng-model="user.password" value="MM" size="2" maxlength="2">
<input type="text" ng-bind="user.dobYear" ng-model="user.password" value="YYYY" size="4" maxlength="4">
</td>
</tr>
<tr>
<td>
Profile picture
</td>
<td>
<input type="file" ng-bind="profile_picture">
</td>
</tr>
<tr>
<td></td>
<td style="float:left">
<button ng-click="submit()">Submit</button>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>Upvotes: 1
Related Questions
- Open a URL in a new tab (and not a new window)
- Why does my JavaScript code receive a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error, while Postman does not?
- Angular: conditional class with *ngClass
- What is the difference between angular-route and angular-ui-router?
- Working with $scope.$emit and $scope.$on
- Insert HTML into view from AngularJS controller
- Combating AngularJS executing controller twice
- Can one AngularJS controller call another?
- How to use a filter in a controller?
- Link vs compile vs controller