我正在尝试使用智能表(http://lorenzofox3.github.io/smart-table-website/#top)
实现带有过滤器的angularjs表确切地说,我正在实现一个带有日期和数字列过滤器的表。 (在提供的链接上,它可以在“日期和数字过滤”部分中找到。)
但是,我收到如下错误消息,
angular.min.js:114 ReferenceError: ng is not defined
at link (http://localhost:39459/app/app.module.js:27:35)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js:78:461
at ka (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js:79:16)
at u (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js:66:326)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js:74:460
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js:126:404
at m.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js:141:47)
at m.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js:138:140)
at m.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js:141:341)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js:94:139)
<st-date-range predicate="datetime" before="query.before" after="query.after" class="ng-isolate-scope">`enter code here`
以下是我的代码,
在_Layout.cshtml上,我有以下脚本和样式导入,
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-sanitize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.2.5/ui-bootstrap-tpls.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-smart-table/2.1.8/smart-table.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="~/app/components/expense/expenseController.js"></script>
<script src="~/app/app.module.js"></script>
<link href="~/assets/css/Site.css" rel="stylesheet" />
以下是app.module.js中的代码。
var mainApp = angular.module('ExpenseManagerApp', ['ngRoute', 'ui.bootstrap', 'ui.bootstrap.tpls', 'smart-table'])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/dashboard', { templateUrl: 'app/components/dashboard/dashboard.html', controller: 'dashboardController' }).
when('/expense', { templateUrl: 'app/components/expense/expense.html', controller: 'expenseController' }).
otherwise({ redirectTo: '/dashboard', templateUrl: 'app/components/dashboard/dashboard.html' });
}])
.controller('dashboardController', dashboardController)
.controller('expenseController', expenseController)
.directive('stDateRange', ['$timeout', function ($timeout) {
return {
restrict: 'E',
require: '^stTable',
scope: {
before: '=',
after: '='
},
templateUrl: '/app/shared/partials/stDateRange.html',
link: function (scope, element, attr, table) {
var inputs = element.find('input');
var inputBefore = ng.element(inputs[0]);
var inputAfter = ng.element(inputs[1]);
var predicateName = attr.predicate;
[inputBefore, inputAfter].forEach(function (input) {
input.bind('blur', function () {
var query = {};
if (!scope.isBeforeOpen && !scope.isAfterOpen) {
if (scope.before) {
query.before = scope.before;
}
if (scope.after) {
query.after = scope.after;
}
scope.$apply(function () {
table.search(query, predicateName);
})
}
});
});
function open(before) {
return function ($event) {
$event.preventDefault();
$event.stopPropagation();
if (before) {
scope.isBeforeOpen = true;
} else {
scope.isAfterOpen = true;
}
}
}
scope.openBefore = open(true);
scope.openAfter = open();
}
}
}])
.directive('stNumberRange', ['$timeout', function ($timeout) {
return {
restrict: 'E',
require: '^stTable',
scope: {
lower: '=',
higher: '='
},
templateUrl: '/app/shared/partials/stNumberRange.html',
link: function (scope, element, attr, table) {
var inputs = element.find('input');
var inputLower = ng.element(inputs[0]);
var inputHigher = ng.element(inputs[1]);
var predicateName = attr.predicate;
[inputLower, inputHigher].forEach(function (input, index) {
input.bind('blur', function () {
var query = {};
if (scope.lower) {
query.lower = scope.lower;
}
if (scope.higher) {
query.higher = scope.higher;
}
scope.$apply(function () {
table.search(query, predicateName)
});
});
});
}
};
}])
.filter('customFilter', ['$filter', function ($filter) {
var filterFilter = $filter('filter');
var standardComparator = function standardComparator(obj, text) {
text = ('' + text).toLowerCase();
return ('' + obj).toLowerCase().indexOf(text) > -1;
};
return function customFilter(array, expression) {
function customComparator(actual, expected) {
var isBeforeActivated = expected.before;
var isAfterActivated = expected.after;
var isLower = expected.lower;
var isHigher = expected.higher;
var higherLimit;
var lowerLimit;
var itemDate;
var queryDate;
if (ng.isObject(expected)) {
//date range
if (expected.before || expected.after) {
try {
if (isBeforeActivated) {
higherLimit = expected.before;
itemDate = new Date(actual);
queryDate = new Date(higherLimit);
if (itemDate > queryDate) {
return false;
}
}
if (isAfterActivated) {
lowerLimit = expected.after;
itemDate = new Date(actual);
queryDate = new Date(lowerLimit);
if (itemDate < queryDate) {
return false;
}
}
return true;
} catch (e) {
return false;
}
} else if (isLower || isHigher) {
//number range
if (isLower) {
higherLimit = expected.lower;
if (actual > higherLimit) {
return false;
}
}
if (isHigher) {
lowerLimit = expected.higher;
if (actual < lowerLimit) {
return false;
}
}
return true;
}
//etc
return true;
}
return standardComparator(actual, expected);
}
var output = filterFilter(array, expression, customComparator);
return output;
};
}]);
以下是我在expenseController.js中的代码
var expenseController = function ($scope, $log) {
$scope.rowCollection = [{ id: 1, datetime: new Date().toLocaleString(), description: 'Credit Card Payment', category: 'Food', amount: '10.50' },
{ id: 2, datetime: new Date().toLocaleString(), description: 'Debit Card Payment', category: 'Clothes', amount: '22.50' },
{ id: 3, datetime: new Date().toLocaleString(), description: 'Net Banking Payment', category: 'Utensils', amount: '56.50' },
{ id: 4, datetime: new Date().toLocaleString(), description: 'Loan Payment', category: 'Food', amount: '10.50' }
];
};
expenseController.$inject = ['$scope', '$log'];
休息一切都与智能表网站上提供的示例代码相同。
有谁能让我知道我错过了什么导致了这个错误?