RequireJs、AngularUI、jQuery UI を使用して AngularJS アプリケーションを構築しています。
スライダーを使用すると、次のエラーが発生することがあります。
TypeError: オブジェクト [object Object] にはメソッド 'slider' がありません
初期化時 (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)
オブジェクトで。(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
(無名関数) angular.min.js?v=635137928871837150:62
(無名関数) 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
ページを更新すると、エラーはなくなり、とにかくたまにしか発生しません。
私は使っている:
- バージョン 2.1.8.js が必要
- Angular Ui Slider の現在のバージョン ( https://github.com/angular-ui/ui-slider/blob/master/src/slider.js )
私のRequire Configの関連部分は次のとおりです。
require.config({
シム: {
jqueryui: {
deps: ['jquery']
}、
'angular': { 'exports': 'angular' },
angularResource: { deps: ['angular'] },
angularMocks: { deps: ['angular'] },
angularSortable: { deps: ['angular', 'jquery', 'jqueryui'] },
angularSlider: { deps: ['angular', 'jquery', 'jqueryui'] }
}、
パス: {
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'
}
});
次のようにアプリケーションをブートストラップしています。
require(['require', 'jquery', 'jqueryui', 'angular', 'angularResource', 'angularSortable', 'angularSlider'],
function (require, $, jqueryui, angular) {
'厳密を使用';
var contentApp = angular.module('testApp', ['ngResource', 'ui.sortable', 'ui.slider']);
require(['TestController'],
関数 () {
$(document).ready(function () {
var $angularRootElement = $('#wrapper');
angular.bootstrap($angularRootElement, [contentApp['name']]);
$angularRootElement.addClass('ng-app');
});
});
}
);
問題は、Angular UI スライダー コードが実行される前に jQuery UI がロードされない場合があることだと思います。ただし、Chrome のネットワーク タブで、スライダーの前に jQuery UI がダウンロードされていることがわかります。
これをデバッグする方法について、誰かにアイデアを教えてもらえますか?
ありがとう