2014-01-27 118 views
2

我使用require.js加載toastr.js到我的角度項目中,但它不能用作全局變量。toastr undefined with requirejs

這是main.js:

require.config({ 
    baseUrl: 'js', 
    paths: { 
    domReady: '../lib/requirejs-domready/domReady', 
    jquery: '../lib/jquery/jquery', 
    jqueryValidate: '../lib/jquery.validation/jquery.validate', 
    underscore: '../lib/underscore/underscore', 
    bootstrap: '../lib/bootstrap/dist/js/bootstrap', 
    moment: '../lib/momentjs/moment', 
    toastr: '../lib/toastr/toastr', 
    angular: '../lib/angular/angular', 
    ngAnimate: '../lib/angular-animate/angular-animate', 
    'ui.router': '../lib/angular-ui-router/release/angular-ui-router', 
    'chieffancypants.loadingBar': '../lib/angular-loading-bar/build/loading-bar', 
    uuid4: '../lib/angular-uuid4/angular-uuid4', 
    'ui.bootstrap': '../lib/angular-bootstrap/ui-bootstrap', 
    'ui.bootstrap.tpls': '../lib/angular-bootstrap/ui-bootstrap-tpls', 
    xeditable: '../lib/angular-xeditable/dist/js/xeditable', 
    Restangular: '../lib/restangular/dist/restangular', 
    ngCookies: '../lib/angular-cookies/angular-cookies' 
    }, 
    shim: { 
    angular: { 
     exports: 'angular' 
    }, 
    Restangular: { 
     deps: ["underscore", "angular"] 
    }, 
    'ui.router': { 
     deps: ['angular'] 
    }, 
    'ui.bootstrap': { 
     deps: ['angular', 'ui.bootstrap.tpls'] 
    }, 
    underscore: { 
     exports: '_' 
    }, 
    bootstrap: { 
     deps: ['jquery'] 
    }, 
    toastr: { 
     deps: ['jquery'], 
     exports: 'toastr' 
    }, 
    jquery: { 
     exports: 'jquery' 
    } 
    }, 
    deps: ['boot'] 
}); 

boot.js:

define([ 
    'require', 
    'angular', 
    'bootstrap', 
    'app' 
], function (require, ng) { 

    'use strict'; 

    require(['domReady!'], function (document) { 
    ng.bootstrap(document, ['wb']); 
    }); 

}); 

這裏是模塊在app.js.所需它依靠toastr:

define([ 
    'angular', 
    'ui.router', 
    'ngCookies', 
    'toastr' 
], function (ng) { 

    'use strict'; 

    var module = ng.module('wb.common', [ 
    'ui.router', 
    'ngCookies' 
    ]); 

    return module; 

}); 

我看到toastr.js加載,但它不是創建爲全局變量。所以window.toastr是未定義的。我正在出口toasr在墊片...

任何想法爲什麼taostr不可用作爲全局變量?

感謝

回答

6

沒關係,通過查看toastr(toastr.js結束)的來源,這讓本身可作爲模塊。使用所需的toastr服務改變從:

define(['../module'], function (module) { 

    'use strict'; 

    module.factory('NotifierSvc', ['$log', function ($log) { 
    return { 
     info: function (msg) { 
     toastr.info(msg); 
     $log.info(msg); 
     }, 
     warning: function (msg) { 
     toastr.warning(msg); 
     $log.warn(msg); 
     }, 
     error: function (msg) { 
     toastr.error(msg); 
     $log.error(msg); 
     }, 
     success: function (msg) { 
     toastr.success(msg); 
     $log.log(msg); 
     } 
    } 
    }]); 

}); 

這樣:

define(['../module', 'toastr'], function (module, toastr) { 

    'use strict'; 

    module.factory('NotifierSvc', ['$log', function ($log) { 
    return { 
     info: function (msg) { 
     toastr.info(msg); 
     $log.info(msg); 
     }, 
     warning: function (msg) { 
     toastr.warning(msg); 
     $log.warn(msg); 
     }, 
     error: function (msg) { 
     toastr.error(msg); 
     $log.error(msg); 
     }, 
     success: function (msg) { 
     toastr.success(msg); 
     $log.log(msg); 
     } 
    } 
    }]); 

});