CODEWITHSUNDEEP
angularjs
Timo002
Timo002

Reputation: 3208

AngularJS can't get two controller working simultanously

I'm developing an application based an AngularJS. Now I have two tables with different controllers. But only one of the controllers is working. The controllers are copies of each other but have small differences.

If I remove controller B from the code, then controller A is working.
If I remove controller A from the code, then controller B is working.

Both controllers have a own js file. The controller loaded as last is always the one that is working.

Both controllers don't work simultaneously. I'm also getting this error in the console.

Error: [ng:areq] http://errors.angularjs.org/1.2.28/ng/areq?p0=aCtrl&p1=not%20aNaNunction%2C%20got%20undefined

Below my code, stripped because it's a lot to post! I also can't get a jsfiddle working with all that code (to much dependencies)

aCtrl

(function() {
  'use strict';
  angular.module('app.tables', []).controller('aCtrl', [
    '$scope', '$filter', '$http', function($scope, $filter, $http) {
      var init;
      $http.get('/data/a.json').success(function(data) {
        $scope.stores = data;
        return init();
      });
      $scope.stores = [{}];
      // rest of the code

    }
  ]);

}).call(this);

bCtrl (copy of a) 

(function() {
  'use strict';
  angular.module('app.tables', []).controller('bCtrl', [
    '$scope', '$filter', '$http', function($scope, $filter, $http) {
      var init;
      $http.get('/data/b.json').success(function(data) {
        $scope.stores = data;
        return init();
      });
      $scope.stores = [{}];
      // rest of the code

    }
  ]);

}).call(this);

HTML for aCtrl

<div class="page page-table" data-ng-controller="aCtrl">
<table class="table table-bordered table-striped table-responsive">
  <tbody>
  <tr data-ng-repeat="store in currentPageStores">
    <td>{{store.col1}}</td>
    <td>{{store.col2}}</td>
    <td>{{store.col3}}</td>
    <td>{{store.col4}}</td>
  </tr>
  </tbody>
</table>
</div>

HTML for bCtrl

<div class="page page-table" data-ng-controller="bCtrl">
<table class="table table-bordered table-striped table-responsive">
  <tbody>
  <tr data-ng-repeat="store in currentPageStores">
    <td>{{store.col1}}</td>
    <td>{{store.col2}}</td>
    <td>{{store.col3}}</td>
    <td>{{store.col4}}</td>
  </tr>
  </tbody>
</table>
</div>

Upvotes: 0

Views: 257

Answers (1)

Chandermani
Chandermani

Reputation: 42669

This is the case of re-creation of module I believe. Your call

angular.module('app.tables', [])

creates a module. Since there are 2 such instances in code, the module gets created twice, second one overriding the first one. Remove the second declaration and change it to:

angular.module('app.tables').controller('bCtrl', [ //note the declaration now does not have [] as second parameter

Upvotes: 3

Related Questions