Question

我试图在依赖项中包含几个指令。在我添加一个名为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>

Answer 1

看起来指令中链接和控制器函数的参数不正确。试试这个：

// '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) {

AngularJS：未捕获错误：$ injector：modulerr无法实例化模块

1 个答案: