Having two ng-controller with angularJS
Question
This is my JS file
var camListApp = angular.module('camListApp', []);
camListApp.controller('Hello', ['$scope', '$http', function($scope, $http){
$http.get('http://localhost:8080/camera/list').then(function(response) {
$scope.records= response.data;
});
}]);
camListApp.controller('Hello2',['$scope', function($scope){
$scope.custom = true;
$scope.toggleCustom = function() {
$scope.custom = ! $scope.custom;
};
}]);
This is my Html file
<html ng-app='camListApp'>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js">
</script>
<script src="hello.js"></script>
<title>Image downloader </title>
</head>
<body>
<h3>Search by cameraid:</h3><br>
<select ng-model="searchBox" style="width:25%">
<option value="000000006f4280af">000000006f4280af</option>
<option value="002">002</option>
<option value="0011">0011</option>
</select>
<div ng-controller="Hello">
<br>
<table>
<thead>
<tr>
<th>CamID</th>
<th>Timestamp</th>
<th>View Image</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="record in records | filter:searchBox">
<td>{{record.cameraid}}</td>
<td>{{record.timestamp}}</td>
<div ng-controller="Hello2">
<td><button ng-click="toggleCustom()">View</button></td>
</tr>
</tbody>
</table>
<span ng-hide="custom">From:
<input type="text" id="from" />
</span>
<span ng-show="custom"></span>
</div>
</body>
</html>
How can i have two controllers to work in an app? As i cannot find any way for them to work at the same time. The first controller is to consume my web service with angularjs but this is able to work and i added another controller that is using toggle a button to show and hide.
2 answers
solution1
1 ACCPTED 2016-06-14 12:33:31
There are several issues with your code. First of all, div is not a valid element as a child of a tr , so lose that one.
Secondly, your custom property is outside of your second controller if you maintain the current scoping:
<!-- the Hello2 controller and its scope is only available on the td
itself and its children. You use your 'custom' property outside of this,
so that won't work -->
<td ng-controller="Hello2"><button ng-click="toggleCustom()">View</button></td>
Looking at your scoping you should just only use the first controller, and put the code on that one:
var camListApp = angular.module('camListApp', []);
camListApp.controller('Hello', ['$scope', '$http', function($scope, $http){
$scope.custom = true;
$scope.toggleCustom = function() {
$scope.custom = ! $scope.custom;
};
$http.get('http://localhost:8080/camera/list').then(function(response) {
$scope.records= response.data;
});
}]);
solution2
0 2016-06-14 13:08:50
read the documentation first - angularjs docs
the answer to your question is - no , your .html file may have one controller
but if you wish to reuse your logics, it's done via factories and services - angularjs docs
another must-read: angularjs good practice
so let's apply that on your code
app.js
angular
.module('camListApp', []);
myCtl.controller.js
angular
.module('camListApp')
.controller('myCtl', myCtl);
function myCtl($scope, myFactory) {
var vm = this;
vm.doSomething = myFactory.someFactoryFunction;
}
myFactory.factory.js
angular
.module('camListApp')
.factory('myFactory', myFactory);
function myFactory($http) {
return {
someFactoryFunction: retrieveSomeData
};
function retrieveSomeData() {
$http.get('http://localhost:8080/camera/list')
.then(success)
.catch(error);
function success(response) {
return response.data;
}
function error(response) {
// handle error
}
}
}
view.html
...
<div ng-controller="myCtl">
<button ng-click="vm.doSomething()">View</button>
</div>
...
not sure if the code above is 100% working , didn't try it out, but the logic stays the same
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.