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 。

将他们的定义移到顶部，即

var bootstrap_modal = function () { ... } var ModalController = function($scope) { ... } app .controller("ModalController", ModalController) .directive("bootstrap-modal", bootstrap_modal) ;

或将它们定义为利用hoisting的函数，例如

function ModalController($scope) { // etc } function bootstrap_model() { // etc }

此外，您的指令名称应为bootstrapModal，即

app.directive('bootstrapModal', bootstrap_modal)

更新

至于您的新错误，它似乎与$compile有关。你的元素是否有两个指令，例如<bootstrap-modal login-modal>？

这就是require的意思，但我认为你使用的不正确。

Answer 2

Phil和Faizal在^^之上为你找到了答案。我有一个预先格式化的版本，以方便使用。在使用大写的指令声明和角度API命名空间的所有类型的定义时，值得注意的是要非常小心。坚持使用常规的camelCase是安全的，对于那些有角度的人来说，这可能是一个棘手的问题。

Here are the some of the details

& More naming tips

(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

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

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

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

，可以实现哪些目的

import Foundation
import MBProgressHUD
import QuartzCore

extension UITableViewController {
    func showHudForTable(_ message: String) {
        let hud = MBProgressHUD.showAdded(to: self.view, animated: true)
        hud.label.text = message
        hud.isUserInteractionEnabled = false
        hud.layer.zPosition = 2
        self.tableView.layer.zPosition = 1
    }
}

extension UIViewController {
    func showHud(_ message: String) {
        let hud = MBProgressHUD.showAdded(to: self.view, animated: true)
        hud.label.text = message
        hud.isUserInteractionEnabled = false
    }

    func hideHUD() {
        MBProgressHUD.hide(for: self.view, animated: true)
    }
}

// Use extensions

此外，您应该访问此JavaScript function declaration syntax: var fn = function() {} vs function fn() {} 链接，了解相同的详细信息。

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

Answer 4

在我的情况下，我删除了一个模块并删除了它的定义，但忘了删除对angular.module（''，[]）的调用.signal（）：

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

删除'.directive（...）'解决了问题。

AngularJS错误：[ng：areq]参数'directiveFactory'是必需的

4 个答案:

更新