Angularjs 模块 - 打包指令及其控制器

Question

我有以下 javascript 代码，我运行遇到了问题：

我的 .js 文件

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'
     }
})

目前，我在指令中使用控制器 'MainCtrl'。但是是否可以将所有控制器放入指令中并仍然按照正常使用使其运行？？

我想要的最终 .js 文件

.directive('test',function(){

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

}

Answer 1

你可以通过将函数放在指令中来简单地这样做：

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

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

Answer 2

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

将指令和控制器打包到一个模块中：

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
});

然后同学通过将模块作为依赖项添加到他们的应用程序来使用它：

JS

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

HTML

<sai-directive></sai-directive>

服务、过滤器、提供者、常量等也可以添加到模块中。

有关详细信息，请参阅 AngularJS Module API Reference。

Angularjs 模块 - 打包指令及其控制器

Angularjs Modules - Packaging Directives and Their Controllers

angularjs

angularjs-directive

angularjs-controller

angularjs-module

sai.js

JS

HTML