2014-01-13 67 views
1

我对requirejs比较陌生。我试图加载我的IE依赖通过需求,但只有当浏览器低于IE9。我正在尝试在https://stackoverflow.com/a/11846837/1954860中建议的加载IE依赖关系的方法。使用requireJS加载IE依赖项

问题是,加载此代码时,jQuery/$尚未定义。 这是我main.js的代码:

require.config(
{ 
    baseUrl: 'scripts', 
    paths: { 
     // Vendor modules 
     angular: 'vendor/angular/angular', 
     jquery: 'vendor/jquery', 
     domReady: 'vendor/domReady', 
     angularResource: 'vendor/angular/angular-resource', 
     angularTouch: 'vendor/angular/angular-touch', 
     openLayers: 'vendor/openlayers', 
     typeAhead: 'vendor/typeahead', 
     azimuth: 'vendor/azimuth/module' 

     // App modules 

    }, 
    map: { 
     // This mapping makes sure noConflict is used for jquery. Use noConflict.js to configure whether or not 
     // window.jQuery should remain available. If it is not left available in the global namespace, any jquery 
     // plugins that do not use AMD cannot be used without modifying those plugins to be AMD modules. 
     // So be warned. 
     '*': { 
      'jquery': 'noConflict' 
     }, 
     noConflict: { 
      jquery: 'jquery' 
     } 
    }, 
    shim: { 
     angular: { 
      deps: ['jquery'], 
      exports: 'angular' 
     }, 
     angularResource: { 
      deps: ['angular'] 
     }, 
     angularTouch: { 
      deps: ['angular'] 
     }, 
     openLayers: { 
      exports: 'openLayers' 
     }, 
     typeAhead: { 
      deps: ['jquery'], 
      exports: 'jquery' // Make sure the noconflict configuration of jquery doesn't break this extension 
     }, 
     azimuth: { 
      deps: ['angular', 'jquery'], 
      exports: 'az' 
     } 
    } 
} 
); 

require(
[ 
    'angular', 
    'app', 
    'bootstrap', // This is not Twitter Bootstrap, but our own AngularJS Bootstrap 
    'controllers/rootController', 
    'services/searchService', 
    'directives/ngbkFocus' 
    // Any individual controller, service, directive or filter file that you to the app will also need to be added here. 
    // This is manual maintenance. Although maybe Yeoman could help. 
], 
function(angular, app) { 
    'use strict'; 

    app.config(['$routeProvider', 
     function($routeProvider) { 
      // Define your routes here 
     } 
    ]); 
} 
); 

// IE8 and below specific scripts 
if ($('html.lt-ie9').size()) { 
require(['/scripts/ie'], function(ieScript) { 
    // ... do stuff 
}); 
} 

我的应用程序的的index.html的HTML元素看起来是这样的:

<!--[if lt IE 7]>  <html class="ie lt-ie10 lt-ie9 lt-ie8 lt-ie7"> <![endif]--> 
<!--[if IE 7]>  <html class="ie lt-ie10 lt-ie9 lt-ie8"> <![endif]--> 
<!--[if IE 8]>  <html class="ie lt-ie10 lt-ie9"> <![endif]--> 
<!--[if IE 9]>  <html class="ie lt-ie10><![endif]--> 
<!--[if !IE]><!--><html><!--<![endif]--> 

所以...我将如何去这个?我可以做这样的条件需求调用吗?我是否应该在其他地方拨打必要的电话?

最好的问候, 马亭森登

回答

3

也许,我认为你需要它环绕require

require(['jquery'], function($) { 
    // IE8 and below specific scripts 
    if ($('html.lt-ie9').size()) { 
     require(['/scripts/ie'], function(ieScript) { 
     // ... do stuff 
     }); 
    } 
}); 
+0

谢谢!这样可行! – Martijn