CODEWITHSUNDEEP
javascriptangularjshtml
Ajay Kumar
Ajay Kumar

Reputation: 309

Use multiple controller for one page while using routeParams?

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

Upvotes: 1

Views: 240

Answers (1)

Shai Aharoni
Shai Aharoni

Reputation: 1957

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

Upvotes: 1

Related Questions