angularjs - Angular UI slider with Require JS fires before jQuery UI -
i building angularjs application using requirejs, angularui , jquery ui.
i following error when using slider:
typeerror: object [object object] has no method 'slider' @ init (http://example.com/assets/js/lib/angular-ui/slider.js?v=635137928871837150:18:29) @ ngmodel.$render (http://example.com/assets/js/lib/angular-ui/slider.js?v=635137928871837150:55:25) @ object. (http://example.com/assets/js/lib/angular-1.0.7/angular.min.js?v=635137928871837150:140:131) @ object.e.$digest (http://example.com/assets/js/lib/angular-1.0.7/angular.min.js?v=635137928871837150:86:286) @ object.e.$apply (http://example.com/assets/js/lib/angular-1.0.7/angular.min.js?v=635137928871837150:88:506) @ e (http://example.com/assets/js/lib/angular-1.0.7/angular.min.js?v=635137928871837150:95:38) @ p (http://example.com/assets/js/lib/angular-1.0.7/angular.min.js?v=635137928871837150:98:123) @ xmlhttprequest.t.onreadystatechange (http://example.com/assets/js/lib/angular-1.0.7/angular.min.js?v=635137928871837150:99:259) angular.min.js?v=635137928871837150:62 (anonymous function) angular.min.js?v=635137928871837150:62 (anonymous function) angular.min.js?v=635137928871837150:52 e.$digest angular.min.js?v=635137928871837150:87 e.$apply angular.min.js?v=635137928871837150:88 e angular.min.js?v=635137928871837150:95 p angular.min.js?v=635137928871837150:98 t.onreadystatechange angular.min.js?v=635137928871837150:99
if refresh page error goes away , happens anyway.
i using:
- require version 2.1.8.js
- current version of angular ui slider (https://github.com/angular-ui/ui-slider/blob/master/src/slider.js)
the relevant parts of require config are:
require.config({ shim: { jqueryui: { deps: ['jquery'] }, 'angular': { 'exports': 'angular' }, angularresource: { deps: ['angular'] }, angularmocks: { deps: ['angular'] }, angularsortable: { deps: ['angular', 'jquery', 'jqueryui'] }, angularslider: { deps: ['angular', 'jquery', 'jqueryui'] } }, paths: { angular: '/assets/js/lib/angular-1.0.7/angular.min', angularresource: '/assets/js/lib/angular-1.0.7/angular-resource.min', angularmocks: '/assets/js/lib/angular-1.0.7/angular-mocks', angularsortable: '/assets/js/lib/angular-ui/sortable', angularslider: '/assets/js/lib/angular-ui/slider', jquery: '/assets/js/lib/jquery-1.9.1.min', jqueryui: '/assets/js/lib/jquery-ui-1.10.0' } });
i bootstrapping application so:
require(['require', 'jquery', 'jqueryui', 'angular', 'angularresource', 'angularsortable', 'angularslider'], function (require, $, jqueryui, angular) { 'use strict'; var contentapp = angular.module('testapp', ['ngresource', 'ui.sortable', 'ui.slider']); require(['testcontroller'], function () { $(document).ready(function () { var $angularrootelement = $('#wrapper'); angular.bootstrap($angularrootelement, [contentapp['name']]); $angularrootelement.addclass('ng-app'); }); }); } );
i presume problem jquery ui hasn't loaded before angular ui slider code runs. although, can see in network tab in chrome jquery ui downloaded before slider.
can give me ideas on how debug this?
thanks
Comments
Post a Comment