javascript - AngularJS依赖自定义模块报错
本文介绍了javascript - AngularJS依赖自定义模块报错的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
在做一个简单的Angular练习的时候出现了一个错误，下面是相关的三个页面:
index.html
<!DOCTYPE html>
<html ng-app="routerApp">
<head>
<meta charset="utf-8">
<title>BookStore</title>
<link rel="stylesheet" type="text/css" href="framework/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="framework/angular-ui-grid/ui-grid.css">
<script type="text/javascript" src="framework/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="framework/angular/angular.js"></script>
<script type="text/javascript" src="framework/angular-animate/angular-animate.js"></script>
<script type="text/javascript" src="framework/angular-ui-router/release/angular-ui-router.js"></script>
<script type="text/javascript" src="framework/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js"></script>
<script type="text/javascript" src="framework/angular-ui-grid/ui-grid.js"></script>
<link rel="stylesheet" type="text/css" href="css/app.css">
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/animations.js"></script>
<script type="text/javascript" src="js/controllers.js"></script>
<script type="text/javascript" src="js/filters.js"></script>
<script type="text/javascript" src="js/services.js"></script>
</head>
<body>
<div ui-view></div>
</body>
</html>
app.js
var routerApp = angular.module('routerApp', ['ui.router', 'ui.grid', 'bookListModule', 'bookDetailModule', 'filterModule']);其中'ui.router'和'ui.grid'是ui-router和ui-grid模块，其余的三个是我自定义的模块，自定义模块在加载时出现错误，错误截图
下面是bookListModule模块的代码：
controllers.js
/**
* 书籍列表模块
* @type {[type]}
*/
var bookListModule = angular.module('bookListModule', []);
bookListModule.controller('bookListCtrl', ['$scope', '$http', '$state', '$stateParams',
function($scope, $http, $state, $stateParams) {
$scope.filterOptions = {
filterText: '',
useExternalFilter: true
};
$scope.totalServerItems = 0;
$scope.pagingOptions = {
pageSizes: [5, 10, 20],
pageSize: 5,
currentPage: 1
};
$scope.setPagingData = function(data, page, pageSize) {
var pageData = data.slice((page - 1) * pageSize, page * pageSize);
$scope.books = pageData;
$scope.totalServerItems = data.length;
if ($scope.$$phase) {
$scope.apply();
}
}
console.log($stateParams);
$scope.getPageDataAnsy = function(pageSize, page, searchText) {
setTimeout(funciton() {
var data;
if (searchText) {
var ft = searchText.toLowerCase();
$http.get('../data/books' + $stateParams.bookType + '.json')
.success(function(largeLoad) {
data = largeLoad.filter(function(item) {
return JSON.stringify(item).toLowerCase().indexOf(ft) != 1;
});
$scope.setPagingData(data, page, pageSize);
});
} else {
$http.get('../data/books' + $stateParams.bookType + '.json')
.success(function(largeLoad) {
$scope.setPagingData(largeLoad, page, pageSize);
});
}
}, 100);
}
$scope.getPageDataAnsy($scope.pageOptions.pageSize, $scope.pageOptions.currentPage);
$scope.$watch('pageOptions', function(newVal, oldVal) {
if (newVal !== oldVal && newVal.currentPage !== oldVal.currentPage) {
$scope.getPageDataAnsy($scope.pageOptions.pageSize, $scope.pageOptions.currentPage, $scope.filterOptions.filterText);
}
}, true);
$scope.$watch('filterOptions', function(newVal, oldVal) {
if (newVal !== oldVal && newVal.currentPage !== oldVal.currentPage) {
$scope.getPageDataAnsy($scope.pageOptions.pageSize, $scope.pageOptions.currentPage, $scope.filterOptions.filterText);
}
}, true);
$scope.gridOptions = {
data: 'books',
rowTemplate: '',
multiSelect: false,
enableCellSelection: true,
enableRowSelection: false,
enableCellEdit: false,
enablePinning: true,
columnDefs: [{
field: 'index',
displayName: '序号',
width: 60,
pinnable: false,
sortable: false
}, {
field: 'name',
displayName: '书名',
enableCellEdit: true
}, {
field: 'author',
displayName: '作者',
enableCellEdit: true,
width: 220
}, {
field: 'pubTime',
displayName: '出版日期',
enableCellEdit: true,
width: 120
}, {
field: 'price',
displayName: '定价',
enableCellEdit: true,
width: 120,
cellFilter: 'currency:"￥"'
}, {
field: 'bookId',
displayName: '操作',
enableCellEdit: false,
sortable: false,
pinnable: false,
cellTemplate: '<div><a ui-sref="bookdetail({bookId:row.getProperty(col.field)})" id="{{row.getProperty(col.field)}}">详情</a></div>'
}],
enablePaging: true,
showFooter: true,
totalServerItems: 'totalServerItems',
pagingOptions: $scope.pagingOptions,
filterOptions: $scope.filterOptions
};
};
]);
/**
* 书籍详情模块
* @type {[type]}
*/
var bookDetailModule = angular.module("bookDetailModule", []);
bookDetailModule.controller('bookDetailCtrl', function($scope, $http, $state, $stateParams) {
console.log($stateParams);
$scope.book = {
bookId: 1,
index: 1,
name: '123',
author: '123',
pubTime: '2014-01-01',
price: 35
};
//$http.get('')
});
请问，那个地方出现问题了？而且还莫名奇妙报了个括号闭合的错误，实在是费解。
解决方案
推荐你使用webstorm，这种字打错的问题可以被检查出来
这篇关于javascript - AngularJS依赖自定义模块报错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
