AngularJS 错误：[ng:areq] 需要参数“directiveFactory”

Question

我有一个网络应用程序，我喜欢在其中插入自己的自定义指令，为了做到这一点，我定义了一个新模块，在其中定义这些新指令（目前只有 1 个），以便将来可以重用。当

AngularJS

尝试实例化新模块时，问题就出现了，我收到以下错误

（我只放了日志的第一部分，这样阅读起来就不会太困难）：

Uncaught Error: [$injector:modulerr] Failed to instantiate module tangoInfinito due to:
Error: [$injector:modulerr] Failed to instantiate module custom.modal due to:
Error: [ng:areq] Argument 'directiveFactory' is required
http://errors.angularjs.org/1.5.9/ng/areq?p0=directiveFactory&p1=required
    at http://localhost/tangoinfinito.com.ar/js/Dependencies/angular/angular.js:68:12
    at assertArg (http://localhost/tangoinfinito.com.ar/js/Dependencies/angular/angular.js:1937:11)
    at $CompileProvider.registerDirective [as directive] (http://localhost/tangoinfinito.com.ar/js/Dependencies/angular/angular.js:7845:7)
    at runInvokeQueue (http://localhost/tangoinfinito.com.ar/js/Dependencies/angular/angular.js:4654:35)
    at http://localhost/tangoinfinito.com.ar/js/Dependencies/angular/angular.js:4662:11
    at forEach (http://localhost/tangoinfinito.com.ar/js/Dependencies/angular/angular.js:325:20)
    at loadModules (http://localhost/tangoinfinito.com.ar/js/Dependencies/angular/angular.js:4644:5)
    at http://localhost/tangoinfinito.com.ar/js/Dependencies/angular/angular.js:4661:40
    at forEach (http://localhost/tangoinfinito.com.ar/js/Dependencies/angular/angular.js:325:20)
    at loadModules (http://localhost/tangoinfinito.com.ar/js/Dependencies/angular/angular.js:4644:5)

这也是我的新模块：

(function() {
    
    var app = angular.module("custom.modal", []);
    
    // Esta directiva es para generalizar los Modals de Bootstrap 3. No debe ser usada de manera individual,
    // sino como esqueleto de Modals personalizados en otras directivas.
    var bootstrapModal = function() {
        return {
            restrict: "E",
            template: 
            "<div class='modal fade' tabindex='-1' role='dialog' aria-labelledby='modalTitle'>" +
                "<div class='modal-dialog' role='document'>" +
                    "<div class='modal-content'>" +
                        "{{ htmlModalContent }}" +
                    "</div>" +
                "</div>" +
            "</div>",
            controller: "ModalController"
        }
    };
    
    var ModalController = function($scope) {
        $scope.htmlModalContent = "";
    };

    app
    .controller("ModalController", ModalController)
    .directive("bootstrapModal", bootstrapModal)
    ;
    
})();

我希望你能帮助我，我在网上搜索了很多，但几乎没有发现关于这个错误的信息。 预先感谢。

编辑：菲尔回答后出现新错误：

Error: [$compile:ctreq] Controller 'bootstrapModal', required by directive 'loginModal', can't be found!

我给你留下了我的“loginModal”指令：

    (function() {
        
        var app = angular.module("tangoInfinito");
        
        var loginModal = function() {
            return {
                require: "bootstrapModal",
                link: function(scope, element, attr) {
                scope.htmlModalContent = /* Here comes the template to be inside the modal (the modal body and footer) */
                },
                template: "<bootstrap-modal></bootstrap-modal>"
            }
        };
        
        app.directive("loginModal", loginModal);
    
})();

Answer 1

您正在尝试使用

ModalController

和

bootstrap_modal

before 定义它们。

将它们的定义移至顶部，即

var bootstrap_modal = function () { ... }
var ModalController = function($scope) { ... }

app
.controller("ModalController", ModalController)
.directive("bootstrap-modal", bootstrap_modal)
;

或将它们定义为函数以利用提升，例如

function ModalController($scope) {
  // etc
}

function bootstrap_model() {
  // etc
}

---

此外，你的指令名称应该是

bootstrapModal

，即

app.directive('bootstrapModal', bootstrap_modal)

---

更新

至于你的新错误，它似乎与

$compile

有关。您的元素是否具有两个指令，例如

<bootstrap-modal login-modal>

？

这就是

require

的意思，但我认为你使用不正确。

Answer 2

Phil 和 Faizal 在上面为您提供了答案 ^^。为了便于使用，我有一个预先格式化的版本如下。值得注意的是，在使用大写指令声明和 Angular API 命名空间的所有类型定义时要非常小心。坚持使用常规的驼峰命名法是安全的，对于那些刚接触 Angular 的人来说，这可能是棘手的问题之一。

这是一些细节

及更多命名技巧

(function() {

var app = angular.module("custom.modal", []);


app
.controller("modalController", modalController)
.directive("bootstrapModal", bootstrapModal)
;

// Esta directiva es para generalizar los Modals de Bootstrap 3. No debe ser usada de manera individual,
// sino como esqueleto de Modals personalizados en otras directivas.
function bootstrapModal() {
    return {
        restrict: "E",
        template: [
            "<div class='modal fade' tabindex='-1' role='dialog' aria-labelledby='modalTitle'>",
                "<div class='modal-dialog' role='document'>",
                    "<div class='modal-content'>",
                        "{{ htmlModalContent }}",
                    "</div>",
                "</div>",
            "</div>"
        ].join(''),

        controller: "modalController"
    }
};

function modalController($scope) {
    $scope.htmlModalContent = "";
};

})();

Answer 3

这是使用函数表达式语法时的常见问题，即

var ModalController = function($scope) { ... }

这会阻止您利用 JavaScript 提升的优势。如果您将函数编写为

，则可以实现这一点

function ModalController($scope){....}

此外，您应该访问此 JavaScript 函数声明语法：var fn = function() {} vs function fn() {} 链接以获取相同内容的详细差异。

此外，Mozilla 文档详细解释了提升。

Answer 4

在我的例子中，我正在删除一个模块并删除其定义，但忘记删除对 angular.module('',[]).directive() 的调用：

angular.module('foo.bar.baz', []).directive('someView', someView /* undefined */);

删除“.directive(...)”解决了问题。