Alvin Wee Alvin Wee - 5 months ago 9
AngularJS Question

Having two ng-controller with angularJS

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.

Answer

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; 
        });
  }]);