AngularJS:未捕获错误:$injector:modulerr未能实例化模块
AngularJS: Uncaught Error: $injector:modulerr Failed to instantiate module
我正试图将几个指令作为依赖项包含在中。一切都很顺利,直到我添加了一个名为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) {
相关文章:
- 错误:$injector:modulerr模块错误(我的第一个SPA应用程序)
- 错误:$injector:modulerr加载图像时模块处于角度
- $injector:modulerr将自定义模块注入Angular应用程序
- AngularJS错误:$injector:modulerr我的浏览器窗口中出现模块错误
- AngularJS 1.3 - 错误:错误:modulerr 模块错误(使用 ng-view,$routeProvide
- AngularJS - $injector:modulerr 模块错误在 angular.js:36.
- 未捕获的错误: [$injector:modulerr] 无法实例化模块 toastr
- 角度 JavaScript 缩小导致错误:$injector:modulerr 模块错误
- 未捕获的错误: [$injector:modulerr] 由于以下原因,无法实例化模块 myApp: 错误: [$inj
- Angular:[$injector:modulerr]未能实例化模块
- ZURB Foundation for Apps[$injector:modulerr]添加模块时出错
- AngularJS 1.4.8$injector:Modulerr模块错误
- AngularJS:未捕获错误:$injector:modulerr未能实例化模块
- 获取错误"错误:$injector:modulerr模块错误"
- Angular - Error: $injector:modulerr模块错误
- “Restangular"错误:$injector:modulerr模块错误
- 错误:$injector:modulerr模块运行应用程序时出错
- Angular 1.4.2 $injector:modulerr模块错误
- 为什么我得到'错误:$injector:modulerr模块错误'在这个基本控制器中
- 错误:$injector:modulerr模块错误!AngularJS