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.

div is not a valid element in a tr. Also, are there any console errors? — devqon
– devqon, Commented Jun 14, 2016 at 12:22
like @devqon wrote, your html is not valid, you don't even close your div with ng-controller — kTT
– kTT, Commented Jun 14, 2016 at 12:24
lose the div, just put the ng-controller on the td for example — devqon
– devqon, Commented Jun 14, 2016 at 12:28

devqon · Accepted Answer · 2016-06-14 12:34:56Z

1

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

edited Jun 14, 2016 at 12:34

answered Jun 14, 2016 at 12:33

devqon

14k2 gold badges32 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alvin Wee Over a year ago

So how should i put the code in my first controller?

Alvin Wee Over a year ago

It works! i just remove the second controller and follow your method.!

matt93 · Accepted Answer · 2016-06-14 13:08:50Z

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

Collectives™ on Stack Overflow

Having two ng-controller with angularJS

2 Answers 2

2 Comments

read the documentation first - angularjs docs

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

read the documentation first - angularjs docs

Comments

Your Answer

Sign up or log in

Post as a guest

Related