toastr undefined with requirejs

时间:2014-01-27 00:03:48

标签: toastr

我正在将带有require.js的toastr.js加载到我的角度项目中,但它不能用作全局变量。

这是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不能用作全局变量?

由于

1 个答案:

答案 0 :(得分: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);
      }
    }
  }]);

});