Use multiple controller for one page while using routeParams?

Question

I am facing problem in using routeParams in my code.

1st Version(It's working fine)

Index.html

<div ng-controller="NaomiController">
      <my-customer></my-customer>
    </div>
    <hr>
    <div ng-controller="IgorController">
      <my-customer></my-customer>
    </div>

my controller.js is :

    angular.module('docsScopeProblemExample', [])
    .controller('NaomiController', ['$scope', function($scope) {
      $scope.customer = {
        name: 'Naomi',
        address: '1600 Amphitheatre'
id:'na'
      };
    }])
    .controller('IgorController', ['$scope', function($scope) {
      $scope.customer = {

        name: 'Igor',
        address: '123 Somewhere'
id:'ig'
      };
    }])
    .directive('myCustomer', function() {
      return {
        restrict: 'E',
        templateUrl: 'my-customer.html'
      };
    });

and my

my-customer.html is:

Name:<a href="{{customer.id}}">{{customer.name}}</a> , Address: {{customer.address}}

after that I want to use routeParams for the next page..

2nd version of code(It's not working)

so index.html is:

<div ng-view></div>

app.js is:

var App = angular.module('App', [
  'ngRoute',
  'myControllers'
]);

App.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/', {
        template: 'home.html',
        controller: 'IgorController','NaomiController'
      }).
      when('/home/:id', {
        templateUrl: 'partials/detail.html',
        controller: 'detailCtrl'
      }).
      otherwise({
        redirectTo: '/home'
      });
  }]);

my controller.js is:

    myControllers.controller('NaomiController', ['$scope', function($scope) {
              $scope.customer = {
                name: 'Naomi',
                address: '1600 Amphitheatre'
        id:'na'
              };
            }])
            .controller('IgorController', ['$scope', function($scope) {
              $scope.customer = {

                name: 'Igor',
                address: '123 Somewhere'
        id:'ig'
              };
            }])
            .directive('myCustomer', function() {
              return {
                restrict: 'E',
                templateUrl: 'my-customer.html'
              };
            }).controller('detailCtrl',['$scope', function($scope){
             $scope.message: "Hello"
}])

where home.html contains:

<div ng-controller="NaomiController">
          <my-customer></my-customer>
        </div>
        <hr>
        <div ng-controller="IgorController">
          <my-customer></my-customer>
        </div>

and detail.html have:

{{message}}

2nd version of my code is not working

You don't need to mention controller: 'IgorController','NaomiController' in Route Configuration, because you have mention controller names in homt templte — saikumar, Jan 13 '16 at 08:58
You can refer this http://stackoverflow.com/questions/25061540/can-i-pass-multiple-controllers-in-routeprovider-when-in-angularjs It explains that you should use only 1 controller. — Reena, Jan 13 '16 at 09:05
@saikumar if I will mention 'homeCtrl' instead of 'IgorController','NaomiController' in Route Configuration (app.js) and myControllers.controller('homeCtrl',[ ]) in controller.js. It will work?? — Ajay Kumar, Jan 13 '16 at 09:08
@Reena I need some solution and that link only explaining that I have to use only 1 controller — Ajay Kumar, Jan 13 '16 at 09:12
My assumption is you want two controllers for that home.html template for 2 DOM elements. so you don't need to mention controller option( controller:'IgorController','NaomiController') in route configuration, you can remove, because in template you hava mentioned controllerds with 'ng-controller' — saikumar, Jan 13 '16 at 09:15
so it will load automatically, BTW you can't mention two controller names for template — saikumar, Jan 13 '16 at 09:16

score 1 · Accepted Answer · answered Jan 13 '16 at 09:02

1

You can only use a single controller for $routeProvider

What you can do is use a single controller for your view and associate your 2 controllers in the view's HTML itself with ng-controller

answered Jan 13 '16 at 09:02

Shai Aharoni

1,955
13
25

Use multiple controller for one page while using routeParams?

1 Answers1