Multiple Controllers for one view angularjs

Question

I would like to know if it is possible to use multiple controllers for a single url view using angluarjs, I have not been able to find much documentation on this. I would like to use a controller on all pages to switch the page header title, but some pages already contain a controller

app.js

subscriptionApp.config(['$routeProvider',function($routeProvider){
$routeProvider.
when('/billinginfo',{templateUrl:'views/billing-info.html', controller:'billingInfoController'}).
when('/orderreview',{templateUrl:'views/order-review.html', controller:'billingInfoController'}).
when('/subscribed',{templateUrl:'views/subscribed.html', controller:'subscribedTitle'}).

//EXAMPLE: HOW COULD I ADD TWO CONTROLLERS TO SAME PAGE??? THIS DOES NOT WORK
when('/subscribe',{templateUrl:'views/subscribe.html', controller:'subscriptionController', 'testControllerTitle'}).

when('/unsubscribed',{templateUrl:'views/cancelconfirm.html', controller:'unsubscribedTitle'}).
when('/redirectBack',{templateUrl:'views/redirect-to-app.html'}).
when('/redirectHandler',{templateUrl:'views/redirect-handler.html',controller:'redirectController'}).
when('/error',{templateUrl:'views/error.html', controller:'messageController'}).
otherwise({redirectTo:'/subscribe'});
}]);

EDIT I am trying to add a title controller to each page view:

function testControllerTitle($rootScope, $scope, $http) { $rootScope.header = "Success!"; }

If I add this controllers to the pages that don't already have a controller it works, if there is another controller in place I can't make this work.

<h1 ng-bind="header"></h1>

Why not have a single controller that is part of your template for the header, and use a service to update it? Something like this: github.com/JeremyLikness/AngularRoutes/blob/master/Scripts/app/… — Jeremy Likness
– Jeremy Likness, Commented Apr 17, 2014 at 19:32

Issam Zoli · Accepted Answer · 2014-04-17 17:41:26Z

4

Yes, controllers and templates are independent, check this http://jsbin.com/wijokuca/1/

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

app.config( function ( $routeProvider ) {
  $routeProvider
  .when('/a', {templateUrl: 'this.html', controller: "aCtrl"})
  .when('/b', {templateUrl: 'this.html', controller: "bCtrl"})
  .when('/c', {templateUrl: 'that.html', controller: "bCtrl"})
  .otherwise({redirectTo: '/a'});
});

app.controller('aCtrl', function ($scope) {
    $scope.all = [1,2,3];
});

app.controller('bCtrl', function ($scope) {
    $scope.all = [4,5,6];
});

answered Apr 17, 2014 at 17:41

Issam Zoli

2,7741 gold badge24 silver badges36 bronze badges

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

Collectives™ on Stack Overflow

Multiple Controllers for one view angularjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related