Angularjs Modules - Packaging Directives and Their Controllers

Question

I have the following javascript code and i ran into a issue:

My .js file

angular.module('MyApp',['ngMaterial','ngMessages'])
.controller('MainCtrl',['$mdDialog',function($mdDialog'){
this.openDialog = openDialog;

function openDialog() {
....... my codes ...... 
    }
)])
.controller('SubCtrl',function($scope){

   my codes.

})

.directive('test',function(){
    return {
        controller: 'MainCtrl' ,
        scope: { } ,
        templateUrl: 'Button.html'
     }
})

Currently, I am using the controller 'MainCtrl' in my directive. But is it possible to put all the controller into the directive and still make it run as per normal usage??

what I want in my final .js File

.directive('test',function(){

my controllers all here <-- unsure of the syntax.

}

Answer 1

In the end i would need to package my directive into a .js file so that my classmates can use it just by calling the directive name and putting in the .js file of the directive

To package the directive and controller into a single module:

sai.js

angular.module("saiModule",[]);

angular.module("saiModule").controller("saiController",function() {
    //Put controller code here
});

angular.module("saiModule").directive("saiDirective", function() {
    //Put directive code here
});

Then classmates use it by adding the module as a dependency to their apps:

JS

angular.module("myApp", ["saiModule"]);

HTML

<sai-directive></sai-directive>

Services, filters, providers, constants, etc. can also be added to the module.

For more information, see AngularJS Module API Reference.

Answer 2

You can simply do like this by putting function inside of directive:

.directive('test',function(){
    return {
        controller: function('$mdDialog'){
            this.openDialog = openDialog;

            function openDialog() {
                ....... my codes ...... 
            } 
        },
        scope: { } ,
        templateUrl: 'Button.html'
     }
})