AngularJS:未捕获错误:$injector:modulerr未能实例化模块

AngularJS: Uncaught Error: $injector:modulerr Failed to instantiate module

本文关键字:modulerr 模块 injector 实例化 错误 AngularJS      更新时间:2023-09-26

我正试图将几个指令作为依赖项包含在中。一切都很顺利,直到我添加了一个名为classificationview的新指令。这只是一个指令,我稍后会用到它。我得到的错误:

Uncaught Error: [$injector:modulerr] Failed to instantiate module mainapp due to:
Error: [$injector:modulerr] Failed to instantiate module ald.classificationview due to:
Error: [$injector:nomod] Module 'ald.classificationview' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

分类指令:

/**
 * 
 */
var classificationViewModule = angular.module('ald.classificationview',[]);
classificationViewModule.factory('classificationAPI',function(){
    return {
        getClassification:function($http){
            //TODO add URL
            var url = "/Classification?artifactId=6450"
            return $http({
                method: 'GET',
                url: url
            });
        }
    };
});
classificationViewModule.directive('classification', function () {
    return {
        restrict: 'EA',
        scope: {},
        replace: true,
        link: function ($scope, element, attributes) {
        },
        controller: function ($scope, $http, classificationAPI) {
            classificationAPI.getClassification($http).success(function(data,status){               
                //TODO Add required binding
                $scope.artifactClassification = data;
            }).error(function(data,status){
                if (404==status){
                    alert("no text");
                } else {
                    alert("bad stuff!");
                }
            });            
        },
        //TODO add template url
        templateUrl: "classificationview.html"
    };
});

main.js文件:

var theApp = angular.module('mainapp', [
    'ald.documentlist',    
    'ald.hierarchylist',
    'ald.hierarchyviewer',
    'ald.documentdisplay',
    'ald.artifactlist',
    'ald.classificationview',
    'ngRoute'
]);
var controllers = {};
var directives = {};
controllers.tabsController = function ($scope, $location, $http) {
    $scope.onClickTab = function (tabUrl) {
        $scope.removePadding();
        $location.$$search = {};
        if (tabUrl == 'Hierarchy') {
            $location.path("/hierarchy");
        }
        else if (tabUrl == 'Artifacts') {
            $location.path("/artifacts");
        }
        else {
            $location.path("/documents");
        }
    };
    $scope.removePadding = function() {
        $("#documentTab").css("padding", "0px");
        $("#hierarchyTab").css("padding", "0px");
        $("#artifactTab").css("padding", "0px");
    };
};
controllers.IndexController = function ($scope, $http) {
};
controllers.DocumentsCentricViewCtrl = function ($scope, $http) {
    $("#tabs").tabs( "option", "active", 0 );
};
controllers.DocumentDisplayViewCtrl = function ($scope, $http) {
    $("#tabs").tabs( "option", "active", 0 );
};
controllers.HierarchyCentricViewCtrl = function ($scope, $http) {
    $("#tabs").tabs( "option", "active", 1 );
};
controllers.ArtifactsCentricViewCtrl = function ($scope, $http) {
    $("#tabs").tabs( "option", "active", 2 );
};
directives.panelTabs = function() {
    return {
        restrict: 'A',
        link: function($scope, elm, attrs) {
            var jqueryElm = $(elm[0]);
            $(jqueryElm).tabs()
            $scope.removePadding();
        }
    };
};
theApp.controller(controllers);
theApp.directive(directives);
theApp.config(['$routeProvider',
    function($routeProvider) {
        $routeProvider.
            when('/documents', {
                templateUrl: 'documentscentricview.html',
                controller: 'DocumentsCentricViewCtrl'
            }).
            when('/hierarchy', {
                templateUrl: 'hierarchycentricview.html',
                controller: 'HierarchyCentricViewCtrl'
            }).
            when('/artifacts', {
                templateUrl: 'artifactscentricview.html',
                controller: 'ArtifactsCentricViewCtrl'
            }).
            when('/documents/:doc', {
                templateUrl: 'documentdisplay.html',
                controller: 'DocumentDisplayViewCtrl'
            }).
            otherwise({
/*
                templateUrl: 'indexview.html',
                controller: 'IndexController'
*/
                redirectTo: '/documents'
            });
    }]); 

javascript文件的来源在索引文件中给出:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="layout" content="main"/>
    <title>The Analyzer Engine and SDX Analysis UI</title>
    %{--<script type="text/javascript">--}%
        %{----}%
    %{--</script>--}%
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <asset:link rel="icon" href="images/*" type="image/png"/>
    <asset:stylesheet src="main.css"/>
    <asset:javascript src="main.js"/>
    <asset:javascript src="ald/documentlist/documentlist.js"/>
    <asset:javascript src="ald/hierarchylist/hierarchylist.js"/>
    <asset:javascript src="ald/hierarchyviewer/hierarchyviewer.js"/>    
    <asset:javascript src="ald/documentdisplay/documentdisplay.js"/>
    <asset:javascript src="ald/artifactlist/artifactlist.js"/>
    <asset:javascript src="ald/classificationview/classificationview.js"/>
</head>
<body>
<div ng-app="mainapp" class="tabWidth">
    <div ng-controller="tabsController">
        <div id="tabs" panel-Tabs>
            <ul>
                <li><a href="#emptyDiv" ng-click="onClickTab('Document')">Document</a></li>
                <li><a href="#emptyDiv" ng-click="onClickTab('Hierarchy')">Hierarchy</a></li>
                <li><a href="#emptyDiv" ng-click="onClickTab('Artifacts')">Clauses, Terms and Titles</a></li>
            </ul>
            <div id="emptyDiv"></div>
        </div>
    </div>
    <div ng-view></div>
</div>
</body>
</html>

指令中链接和控制器函数的参数似乎不正确。试试这个:

// 'scope' not '$scope'
link: function (scope, element, attributes) {
// Don't inject $http or your other dependency into the controller function.  Use the //constructor function of the directive.  See below:
controller: function ($scope)
classificationViewModule.directive('classification', function ($http, ClassificationAPI) {