javascript - AngularJS Error: [ng:areq] Argument 'directiveFactory' is required - Stack Overflow

admin管理员组

文章数量:1410682

I have a web app in which I like to insert my own custom directives, and in order to do that I have defined a new module where I define those new directives (only 1 for now) so I can reuse in the future. The problem es when AngularJS try to instantiate the new module, I got the following error

(I put only the first part of the log so it doesn't get too difficult to read):

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
.5.9/ng/areq?p0=directiveFactory&p1=required
    at http://localhost/tangoinfinito.ar/js/Dependencies/angular/angular.js:68:12
    at assertArg (http://localhost/tangoinfinito.ar/js/Dependencies/angular/angular.js:1937:11)
    at $CompileProvider.registerDirective [as directive] (http://localhost/tangoinfinito.ar/js/Dependencies/angular/angular.js:7845:7)
    at runInvokeQueue (http://localhost/tangoinfinito.ar/js/Dependencies/angular/angular.js:4654:35)
    at http://localhost/tangoinfinito.ar/js/Dependencies/angular/angular.js:4662:11
    at forEach (http://localhost/tangoinfinito.ar/js/Dependencies/angular/angular.js:325:20)
    at loadModules (http://localhost/tangoinfinito.ar/js/Dependencies/angular/angular.js:4644:5)
    at http://localhost/tangoinfinito.ar/js/Dependencies/angular/angular.js:4661:40
    at forEach (http://localhost/tangoinfinito.ar/js/Dependencies/angular/angular.js:325:20)
    at loadModules (http://localhost/tangoinfinito.ar/js/Dependencies/angular/angular.js:4644:5)

also here is my new module:

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

I hope you can help me, I searched a lot through the web and I found almost nothing about this error. Thanks in advance.

EDIT: new error after the Phil answer:

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

I left you my "loginModal" directive:

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

I have a web app in which I like to insert my own custom directives, and in order to do that I have defined a new module where I define those new directives (only 1 for now) so I can reuse in the future. The problem es when AngularJS try to instantiate the new module, I got the following error

(I put only the first part of the log so it doesn't get too difficult to read):

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/1.5.9/ng/areq?p0=directiveFactory&p1=required
    at http://localhost/tangoinfinito..ar/js/Dependencies/angular/angular.js:68:12
    at assertArg (http://localhost/tangoinfinito..ar/js/Dependencies/angular/angular.js:1937:11)
    at $CompileProvider.registerDirective [as directive] (http://localhost/tangoinfinito..ar/js/Dependencies/angular/angular.js:7845:7)
    at runInvokeQueue (http://localhost/tangoinfinito..ar/js/Dependencies/angular/angular.js:4654:35)
    at http://localhost/tangoinfinito..ar/js/Dependencies/angular/angular.js:4662:11
    at forEach (http://localhost/tangoinfinito..ar/js/Dependencies/angular/angular.js:325:20)
    at loadModules (http://localhost/tangoinfinito..ar/js/Dependencies/angular/angular.js:4644:5)
    at http://localhost/tangoinfinito..ar/js/Dependencies/angular/angular.js:4661:40
    at forEach (http://localhost/tangoinfinito..ar/js/Dependencies/angular/angular.js:325:20)
    at loadModules (http://localhost/tangoinfinito..ar/js/Dependencies/angular/angular.js:4644:5)

also here is my new module:

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

I hope you can help me, I searched a lot through the web and I found almost nothing about this error. Thanks in advance.

EDIT: new error after the Phil answer:

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

I left you my "loginModal" directive:

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

• javascript
• angularjs

Share Improve this question Follow edited Jun 12, 2024 at 16:55 Jason Aller 3,6522828 gold badges4141 silver badges3939 bronze badges asked Feb 14, 2017 at 4:22 Augusto HerbelAugusto Herbel 19222 silver badges1313 bronze badges 8

• post the code for directiveFactory – Sajeetharan Commented Feb 14, 2017 at 4:23
• that's the problem, i don't have any "directiveFactory" method or service or anything – Augusto Herbel Commented Feb 14, 2017 at 4:24
• 1 somwhere you have used it, clear cache and check – Sajeetharan Commented Feb 14, 2017 at 4:25
• I don't have used ever that factory method... i just created the directive and controller that you see and inserted that directive in my app, and got this error message... how do i clear cache? – Augusto Herbel Commented Feb 14, 2017 at 4:26
• aaah... browser cache... i clean that every time i made a change and reaload the page... – Augusto Herbel Commented Feb 14, 2017 at 4:29

 |  Show 3 more ments

4 Answers 4

Sorted by: Reset to default 3

You are trying to use ModalController and bootstrap_modal before they are defined.

Move their definitions to the top, ie

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

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

or define them as functions to take advantage of hoisting, eg

function ModalController($scope) {
  // etc
}

function bootstrap_model() {
  // etc
}

---

Also, your directive name should be bootstrapModal, ie

app.directive('bootstrapModal', bootstrap_modal)

---

Update

As for your new error, it seems to relate to $pile. Does your element have both directives, eg <bootstrap-modal login-modal>?

That's what require means but I think you're using it incorrectly.

Phil and Faizal have the answers for you above ^^. I have a pre-formatted version below for ease of use. It's worth noting to be very careful when using capitalized directive declartions and all types of definitions for angular API namespaces. It's safe to stick to regular camelCase, it can be one of the tricky gotcha's for those new to angular.

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 o 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 = "";
};

})();

This a mon problem when you use function expression syntax i.e

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

As, this prevents you from taking the advantage of JavaScript hoisting. Which can be achieved if you write your function as

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

Further, you should visit this JavaScript function declaration syntax: var fn = function() {} vs function fn() {} link for detailed difference of the same.

Also, Mozilla docs explains hoisting in detail.

In my case I was deleting a module and deleted its definition but forgot to remove the call to angular.module('',[]).directive():

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

Removing '.directive(...)' fixed the problem.

本文标签： javascriptAngularJS Error ngareq Argument 39directiveFactory39 is requiredStack Overflow