如何使用 AngularJS 和 RequireJS 设置 Skrollr.js

Question

我在使用 AngularJS 和 RequirejS 设置 Skrollr 时遇到了困难。

一些文章建议将 Skrollr 设置为指令，这是我一直遵循的方法。不幸的是，Skrollr 无法初始化。具体来说，当我尝试从指令中调用 skrollr.init() 时，我收到一条错误消息，指出未定义 skrollr。

下面是我的代码：

directives.js

define(['directivesFactory', 'skrollr'], function(directivesFactory){

directivesFactory.directive('skrollr', [function(){  
    var directiveDefinitionObject = {
        link: function() {
            skrollr.init();
        }
    };

    return directiveDefinitionObject;
}]);
});

main.js

(function() {

'use strict';

require.config({
    baseUrl: 'js',
    paths: {
        'angular': 'libs/angular-1.3.9',
        'angularRoute': 'libs/angular-route-1.3.9',
        'bootstrap': 'libs/modernizr-2.6.2-respond-1.1.0.min',
        'jquery': 'libs/jquery-1.11.0.min',
        'bootstrapJS': 'libs/bootstrap',
        'jqueryElastislide': 'libs/jquery.elastislide',
        'jqueryPpCustom' : 'libs/jquerypp.custom',
        'modernizrCustom' : 'libs/modernizr.custom.17475',
        'skrollr' : 'libs/skrollr.min'
    },
    shim: {
        'angular': {
            exports: 'angular'
        },
        'angularRoute': {
            deps: ['angular']
        },
        'jquery': {
            exports: '$'
        },
        'bootstrapJS': {
            deps: ['jquery']
        },
        'jqueryElastislide':{
            deps: ['jquery']
        },
        'jqueryPpCustom':{
            deps: ['jquery']
        },
        'skrollr': {
            exports: 'skrollr'
        }
    }
});

define('controllersFactory', ['angular'], function(angular) {
    return angular.module('app.controllers', []);
});

define('servicesFactory', ['angular'], function(angular) {
    return angular.module('app.services', []);
});

define('directivesFactory', ['angular'], function(angular) {
    return angular.module('app.directives', []);
}); 

define('app', [
    'angular',
    'angularRoute',
    'servicesFactory',
    'controllersFactory',
    'directivesFactory',
    ],
    function(angular) {
        return angular.module('app', ['app.services', 'app.controllers', 'app.directives', 'ngRoute']);
    }
);

require(['app', 
    'jquery',
    'skrollr',
    'bootstrap', 
    'bootstrapJS',
    'jqueryElastislide',
    'jqueryPpCustom',
    'modernizrCustom'], 
    function(app, 
        jquery, 
        skrollr,
        bootstrap, 
        bootstrapJS, 
        jqueryElastislide, 
        jqueryPpCustom, 
        modernizrCustom) {
    require([
            'controllers/mainController'
        ],
        function() {
            app.config(['$routeProvider', function($routeProvider) {
                $routeProvider.
                    when('/', {templateUrl: 'templates/main.html', controller: "MainController"}).
                    otherwise({redirectTo: '/'});
            }]);

            angular.bootstrap(document, ['app']);
        }
    );
});
})();

从 web 检查器中，我看到 skrollr.min.js 在directives.js 文件之前加载，所以我相信指令应该能够调用skrollr 中的函数。

任何建议将不胜感激 - 谢谢！

Answer 1

define(['directivesFactory', 'skrollr'], function(directivesFactory){

directivesFactory.directive('skrollr', [function(){  
    var directiveDefinitionObject = {
        link: function() {
            skrollr.init();
        }
    };

    return directiveDefinitionObject;
}]);
});

这里好像没有需要skrollr，需要添加require。