javascript - 我可以将 Angular Controller 和指令放在单独的 JS 文件中吗？

Question

我正在使用 Angular 1.5.x 。

我当前有两个文件，一个包含指令，另一个包含指令使用的 Controller 。

指令.js

(function(){
    var myApp = angular.module('legalentity');
  myApp.directive("banks", function() {
        return {
            controller: bankController,
            template: "<div ng-include='banks-tab.html'></div>"
        };
    });
}());

我有一个单独的文件，其中定义了 BankController。

(function () {

    var myApp = angular.module("legalentity");

    myApp.controller("bankController", 'BankController');

    BankController.$inject = ['RDS_BASE_URL'];

    function BankController(RDS_BASE_URL) {
        var entityID = 1001;
        $scope.bankGrid = {
            dataSource: RDS_BASE_URL + '/entity/' + entityID + '/bankdetails/',
            filterRow: {
                visible: true
            },
            headerFilter: {
                visible: true
            },
            groupPanel: {
                visible: true
            }
        };
    }
}());

由于指令找不到bankController，我的页面无法加载 错误如下 ReferenceError:未定义bankController

请您告知如何解决此问题？我想将 Controller 和指令保存在单独的 JS 文件中。

Answer 1

试试这个:

controller: 'bankController'

另外，代替这一行:

myApp.controller("bankController", 'BankController');

写下:

myApp.controller("bankController", BankController);

这是对正在发生的事情的解释:

当你编写 Controller :bankController时，它会尝试在directive.js中找到一个名为bankController的对象，但它无法找到它。但是，当您说“bankController”时，它会尝试在当前模块中查找具有此名称的对象。尽管它位于不同的文件中，但 Angular 仍能够找到它并使用它。

在第二种情况下，如果你说

myApp.controller("bankController", 'BankController');

它尝试将一个字符串分配给一个 Controller ，我认为这会导致 js 错误(尝试检查你的控制台)，因此你的 Controller 甚至不会因为这个错误而被创建。相反，我们将它分配给 BankController，这是一个可以在文件中找到的函数，并将其用作 Controller 定义。