我收到 TypeError: $(...).jqxGrid 不是函数答案

【问题标题】：I am getting TypeError: $(...).jqxGrid is not a function我收到 TypeError: $(...).jqxGrid 不是函数
【发布时间】：2015-06-20 17:37:10
【问题描述】：

我正在尝试使用 angularjs 指令创建 jqxGrid(JQWdidgets)。我正在尝试访问指令中提到的网格 ID，因此尝试使用函数 jqxGrid() 在控制器中设置一些网格属性。但我收到以下错误

TypeError: $(...).jqxGrid is not a function

我在 git 中设置了项目，并且项目有 gulp 文件。我添加了 gulp 任务来加载 jqwidgets 的依赖项。

gulp.task('vendorScripts', function() {
    return gulp.src([
            'bower_components/**/dist/jquery.js',
            'bower_components/**/assets/javascripts/bootstrap.js',
            'bower_components/**/angular.js',
            'bower_components/**/angular-route.js',
            'bower_components/**/highcharts.js',
            'bower_components/**/modules/exporting.js',
            'bower_components/**/release/angular-ui-router.min.js',
            'bower_components/**/ui-bootstrap-tpls.js',
            'bower_components/**/dist/jquery.min.js',
            'bower_components/**/jqwidgets/jqxcore.js',
            'bower_components/**/jqwidgets/jqxdata.js',
            'bower_components/**/jqwidgets/jqxbuttons.js',
            'bower_components/**/jqwidgets/jqxscrollbar.js',
            'bower_components/**/jqwidgets/jqxmenu.js',
            'bower_components/**/jqwidgets/jqxcheckbox.js',
            'bower_components/**/jqwidgets/jqxlistbox.js',
            'bower_components/**/jqwidgets/jqxdropdownlist.js',
            'bower_components/**/jqwidgets/jqxgrid.js',
            'bower_components/**/jqwidgets/jqxgrid.sort.js',
            'bower_components/**/jqwidgets/jqxgrid.pager.js',
            'bower_components/**/jqwidgets/jqxgrid.selection.js',
            'bower_components/**/jqwidgets/jqxgrid.edit.js',
            'bower_components/**/jqwidgets/jqxangular.js'
        ])
        .pipe(plumber())
        .pipe(concat('vendor.js'))
        //.pipe(uglify())
        .pipe(gulp.dest('dist/js'));
});



gulp.start('vendorScripts');

这就是我使用指令的方式：

<jqx-grid id="cs-grid" jqx-settings="$root.settings" jqx-source="$root.gridData"></jqx-grid>

我的控制器实现：

$scope.PageSize = 3;
            $rootScope.settings = {
                theme: 'bootstrap',
                width: '100%',
                height: '100%',
                selectionmode: 'none',
                sortable: true,
                pageable: true,
                pagermode: 'simple',
                pagerheight: 0,
                pagesizeoptions: [3, 5, 10],
                pagesize: $scope.PageSize,
                columns: $rootScope.columns,
                pagerrenderer: function() {
                    return '';
                },
                bindingcomplete: function() {
                    $scope.pagingInfo = $("#cs-grid").jqxGrid('getpaginginformation');
                    $scope.PageNum = 0; 
                }
            };

我曾怀疑，jqxWidget 依赖项没有正确加载。但是当我浏览由 gulp 生成的 vendor.js 时，我发现相关方法（jqxGrid 等）可用。

我正在努力解决这个错误。请帮帮我，

提前致谢

【问题讨论】：

标签： angularjs angularjs-directive controller gulp jqxgrid

【解决方案1】：

尝试重新排序包含文件，尤其是“jqwidgets 文件标签”。当我遇到类似问题时，我重新排序，将日期选择器文件放在标签堆栈的顶部。然后，它运作良好。当然，就您而言，日期选择器不是问题。不过，重新排序可能会有所帮助。

【讨论】：