在AngularJS应用程序中注册外部模块时出现$injector:nomod和$injector:modulerr错误

我从Angular开始，我制作了这个页面（出于学习目的），它的导航栏被封装在导航HTML5标签的属性指令中。当指令在主js模块中时，一切都很好，但当我将代码移动到第二个js文件中，进行所示的所有更改时，我在控制台中收到下一个错误，导航栏永远不会显示：

angular.js:63未捕获错误：[$injector:modulerr]未能实例化模块应用程序由于：

错误：[$injector:modulerr]由于以下原因无法实例化模块adminMenu至：

错误：[$injector:nomod]模块"adminMenu"不可用！你模块名称拼写错误或忘记加载。如果正在注册模块确保将依赖项指定为论点

这是我的index.html文件：

<!DOCTYPE html>
<html lang="es" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>Taller - Administración</title>
</head>
<body>
    <header>
        <nav class="topmnu" admin-menu></nav>
    </header>
    
    <script type="application/javascript" src="js/angular/angular.js"></script>
    <script type="application/javascript" src="js/angular/angular-route.min.js"></script>
    <script type="application/javascript" src="js/app.js"></script>
    <script type="application/javascript" src="js/adminMenu.js"></script>
</body>
</html>

这是我的app.js文件：

(function(){
    var app = angular.module("app", ['adminMenu']);
})();

这里是我保存指令的地方（adminMenu.js）：

(function(){
    var app = angular.module('adminMenu', []);
    app.directive("adminMenu", function(){
        return {
            restrict: 'A ',
            templateUrl: 'admin-menu.html',
            controller: function(){
                this.selected = 1;
                this.setSelected = function(selected){
                    this.selected = selected;
                };
                this.isSelected = function(testValue){
                    return testValue == this.selected;
                };
            },
            controllerAs: 'topMnuCtrl'
        }
    });
});

我唯一要说的是，我已经用camelCase、iffens、low-iffens和小写更改了最后一个文件名和模块名，我总是得到相同的结果！

您已经在自调用函数中包含了您的逻辑，尽管最后一个函数没有被调用。里面的代码不会执行，因此adminMenu模块永远不会被定义，这会导致您的错误。

将您的代码更改为：

(function(){
    var app = angular.module('adminMenu', []);
    app.directive("adminMenu", function(){
        return {
            restrict: 'A ',
            templateUrl: 'admin-menu.html',
            controller: function(){
                this.selected = 1;
                this.setSelected = function(selected){
                    this.selected = selected;
                };
                this.isSelected = function(testValue){
                    return testValue == this.selected;
                };
            },
            controllerAs: 'topMnuCtrl'
        }
    });
})();

请注意末尾的（）。

在adminMenu.js文件中将var app =更改为var adminMenu=。我认为名字上有冲突。

(function(){
var adminMenu = angular.module('adminMenu', []);
adminMenu.directive("adminMenu", function(){
    return {
        restrict: 'A ',
        templateUrl: 'admin-menu.html',
        controller: function(){
            this.selected = 1;
            this.setSelected = function(selected){
                this.selected = selected;
            };
            this.isSelected = function(testValue){
                return testValue == this.selected;
            };
        },
        controllerAs: 'topMnuCtrl'
    }
});

})（）；

相关内容

最新更新

热门标签：