在angular指令中请求时，Requirejs并不总是加载脚本

Question

我正在使用AngularJS和RequireJS构建应用程序。我以前曾多次使用过RequireJS，但这是第一次与Angular结合使用。

我正在使用通过指令初始化的slick.js滑块。大约30％的时间，introBanner.init中未定义浮油。光滑导出但不总是可用。

已加载RequireJS

<script data-main="assets/scripts/main" src="assets/scripts/vendors/bower/require.js"></script>

Main.js

requirejs(['configuration'], function () {

'use strict';

require(['jquery', 'angular', 'foundation', 'foundation-templates', 'myMainJs'], function ($, angular, foundation) {

    //this manually inits/assigns the angular module to the document so the html ng-* attributes see it
    angular.bootstrap(document, ['myMainJs']);

});

});

configuration.js

requirejs.config({
//baseUrl: '/assets/scripts',
paths: {
    'jquery': 'vendors/bower/jquery',
    'slick': 'vendors/bower/slick',
    'angular': 'vendors/bower/angular.min',
    'angular-ui-router': 'vendors/bower/angular-ui-router.min',
    'angular-animate': 'vendors/bower/angular-animate.min'
},

shim: {
    'slick': {
        deps: ['jquery'],
        exports: 'slick'
    },
    'angular-ui-router': {
        deps: ['angular'],
        exports: 'angular'
    },
    'angular-animate': {
        deps: ['angular'],
        exports: 'angular'
    },
    'angular': {
        exports: 'angular'
    }
}
});

HTML

<div class="intro-banner" intro-banner>
<div class="slide" style="background-image: url('http://placehold.it/320x269');">
    <div class="slide-content">
        <h1 class="title">Lorem</h1>
    </div>
</div>
<div class="slide" style="background-image: url('http://placehold.it/320x269');">
    <div class="slide-content">
        <h1 class="title">Lorem</h1>
    </div>
</div>
</div>

指令

define(['jquery', 'slick'], function($, slick){

'use strict';

var introBanner = {
    init: function($elm) {

        $elm.slick({
            variableWidth: false,
            arrows: false,
            dots: true,
            autoplay: false
        });
    }
};

var introBannerDirective = function(){
    return {
        link: function(scope, elm, attrs){
            angular.element(elm).ready(function () {
                introBanner.init(elm);
            });
        }
    };
};

return introBannerDirective;

});