Javascript AngularJS错误：[ng:areq]参数'；直接工厂'；是必需的

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

AngularJS

尝试实例化新模块时，出现了以下错误

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

这也是我的新模块：

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

})();

我给您留下了我的“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);

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

（函数（）{
var app=角度模块（“tangoInfinito”）；
var loginModal=function（）{
返回{
要求：“bootstrapModal”，
链接：功能（范围、元素、属性）{
scope.htmlModalContent=/*模板位于模态内部（模态正文和页脚）*/
},
模板：“”
}
};
应用指令（“loginModal”，loginModal）；

---

})（）

您试图在定义前使用

ModalController

和

bootstrap\u modal

把他们的定义移到最上面

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

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

或将它们定义为可利用的功能，例如

---

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

bootstrapModal

，即

app.directive('bootstrapModal', bootstrap_modal)

---

更新 至于您的新错误，它似乎与

$compile

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

---

这就是它的意思，但我认为你用错了。

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

var ModalController=函数（$scope）{…}

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

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

此外，您还应访问此链接以了解相同的详细差异

---

此外，Mozilla文档也进行了详细解释。

菲尔和法扎尔为您提供了上述答案。为了便于使用，我在下面有一个预格式化的版本。值得注意的是，在使用大写的指令声明和AngularAPI名称空间的所有类型的定义时要非常小心。坚持使用普通的骆驼皮箱是安全的，对于新手来说，这可能是一个棘手的难题

（函数（）{
var-app=angular.module（“custom.modal”，[]）；
应用程序
.控制器（“modalController”，modalController）
.指令（“bootstrapModal”，bootstrapModal）
;
//在引导模式下的一般性指导3.没有任何个人，
//中国-欧盟-欧盟-欧盟-欧盟-欧盟-欧盟-欧盟-欧盟。
函数bootstrapModal（）{
返回{
限制：“E”，
模板：[
"",
"",
"",
“{{htmlModalContent}}”，
"",
"",
""
].加入（“”），
控制器：“modalController”
}
};
函数modalController（$scope）{
$scope.htmlModalContent=“”；
};
})();

在我的例子中，我删除了一个模块并删除了它的定义，但忘记删除对angular.module（“”，[]）.directive（）的调用：

---

删除“.directive（…）”修复了该问题。

发布directiveFactory的代码这就是问题所在，我没有任何“directiveFactory”方法或服务或任何东西。在您使用过它的地方，请清除缓存并检查我从未使用过该factory方法。。。我刚刚创建了您看到的指令和控制器，并在我的应用程序中插入了该指令，并收到此错误消息。。。如何清除缓存？啊。。。浏览器缓存。。。我每次更改并重新加载页面时都会清除这些内容…我现在有一个新错误。。。我将把它发布在我的html文件中只有“”的问题中。。。并在ModalController的htmlModalContent变量中定义进入模态（正文和页脚）内部的html代码。。。这是我的第一个指令，所以可能都错了。。。另外，我认为如果使用require，我可以缩写为在所需指令的模板中使用该指令it@AugustoHerbel否，您不需要

require

来使用另一个指令。我建议你仔细阅读这本书，这就是问题所在。。。非常感谢你的帮助。。。sry我不能投票支持你的答案，我仍然没有必要的声誉。因此，你遇到的另一个问题是你的指令返回中有一个输入错误：

restric：“E”

应该是

restrict：“E”

。它在上面的片段中被修复了^^ooh我没有注意到。。。我修正了，但是错误还在发生。。。我不知道为什么要将“bootstrapModal”作为控制器，因为我已经将它定义为指令……它应该注册为指令。当您在指令中提供控制器属性时，您允许指令访问控制器的作用域。这有时是一个快速修复方法，但可以通过为指令提供隔离范围并在html中将属性从控制器传递给指令来避免。这是一个垃圾箱，它正在通往你需要的地方。

app.directive('bootstrapModal', bootstrap_modal)

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

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

})();

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