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

How to setup Skrollr.js with AngularJS and RequireJS

本文关键字:设置 Skrollr js RequireJS 何使用 AngularJS      更新时间:2023-09-26

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

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

下面是我的代码:

指令.js

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

主.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']);
        }
    );
});
})();

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

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

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

您似乎在这里不需要 skrollr,您需要添加要求。