Я пытаюсь создать jqxGrid (JQWdidgets), используя директиву angularjs. Я пытаюсь получить доступ к идентификатору сетки, который был упомянут в директиве, и, следовательно, пытаюсь использовать функцию 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 загружаются неправильно. Но когда я прошел через vendor.js, который генерируется gulp, я обнаружил, что соответствующие методы (jqxGrid и т. д.) были доступны.
Я изо всех сил пытаюсь решить эту ошибку. Пожалуйста, помогите мне,
заранее спасибо