AngularJS智能表:带有过滤器的智能表上的“ng未定义”错误

时间:2016-03-27 15:06:31

标签: angularjs angularjs-directive

我正在尝试使用智能表(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'];

休息一切都与智能表网站上提供的示例代码相同。

有谁能让我知道我错过了什么导致了这个错误?

0 个答案:

没有答案