多个 ng-app 的相同控制器

Question

I have a single webpage, that have different documents.php, each document with its ng-app and some controllers. (My webpage is similat to spotify).

player.php: (Where the user can play some music with an audio player)

<div class="navbar-fixed" ng-controller="menuController as menu2">
<?php include('includes/menu.php'); ?>
</div>
<div ng-controller="InteractiveController as interactCtrl">
//some code
</div>

panel_admin.php: (where the user can modify its data and some data of the webpage)

<div class="navbar-fixed" ng-controller="menuController as menu2">
<?php include('includes/menu.php'); ?>
</div>
<div ng-controller="AdminController as AdminCtrl">
//some code
</div>

player.php and panel_admin.php have its respective player.js and panel_admin.js with its .controllers.

player.js:

var decibelsInteractive = angular.module("decibels-interactive", []);
decibelsInteractive.controller('InteractiveController', function ($scope, $log) {

panel_admin.js:

var adminControl = angular.module("decibels-admin", []);
adminControl.controller("AdminController", function($scope){

Now, I have the menu bar in menu.php, where I use in player.php , and in panel_admin.php document. I import it because I don't want to repeat code in every page where I need to use the menu (menu.php have options like manage user options, logout, and many others...). I also have created a menu.js to only have the specific methods in one document and not in 25 documents.

menu.php: (menu is a menu bar where the user have some options, and it also have its username and logout option)

//this document only contains some html code

Now, I've tried to implement a simple code (in menu.js ) that allows me to share one controller when I have many ng-app.

Question with the code I've taken

menu.js:

angular.module('decibels-interactive', ['shared']); //player2.php
angular.module('decibels-admin', ['shared']); //panel_admin.php
var sharedModule=angular.module('shared',[]);

sharedModule.controller('menuController',['$scope',function($scope) {
alert("menuController");
}]);   
});

And this worked!!! But then, angular shows an error... (loading player.php)

Error: [ng:areq] http://errors.angularjs.org/1.2.25/ng/areq?p0=InteractiveController&p1=not%20a%20function%2C%20got%20undefined

And when I load panel_admin the same error appears again, but with the AdminController...

It seems like that angular only detects the first controller in each .php, and can't find the second one.

What am I doing wrong?

Thank you!

Answer 1

You can create a file for your shared code and have the controller code inside it.

// @file mySharedCode.js
var MySharedCode = MySharedCode || {};

MySharedCode.menuController = function($scope) {
    // controller logic
};

Then, in your app.js file call menuController function

// @file app.js
sharedModule.controller('menuController', MySharedCode.menuController);