带有Require JS的Angular UI滑块在jQuery UI之前触发

时间:2013-09-03 16:51:29

标签: jquery-ui angularjs angular-ui

我正在使用RequireJs,AngularUI和jQuery UI构建AngularJS应用程序。

使用滑块时偶尔会出现以下错误:

TypeError: Object [object Object] has no method 'slider'
    at init (http://example.com/Assets/js/lib/angular-ui/slider.js?v=635137928871837150:18:29)
    at ngModel.$render (http://example.com/Assets/js/lib/angular-ui/slider.js?v=635137928871837150:55:25)
    at Object. (http://example.com/Assets/js/lib/angular-1.0.7/angular.min.js?v=635137928871837150:140:131)
    at Object.e.$digest (http://example.com/Assets/js/lib/angular-1.0.7/angular.min.js?v=635137928871837150:86:286)
    at Object.e.$apply (http://example.com/Assets/js/lib/angular-1.0.7/angular.min.js?v=635137928871837150:88:506)
    at e (http://example.com/Assets/js/lib/angular-1.0.7/angular.min.js?v=635137928871837150:95:38)
    at p (http://example.com/Assets/js/lib/angular-1.0.7/angular.min.js?v=635137928871837150:98:123)
    at 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

如果我刷新页面,则错误消失,无论如何只会偶尔发生。

我正在使用:

我的Require Config的相关部分是:

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'
    }
});

我正在引导我的应用程序:

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');
            });
        });
    }
);

我认为问题是在Angular UI滑块代码运行之前偶尔没有加载jQuery UI。虽然,我可以在Chrome的网络标签中看到jQuery UI是在滑块之前下载的。

有人可以就如何调试这个问题给我一些想法吗?

由于

0 个答案:

没有答案