AngularJS directive loaded by RequireJS not compiling

Question

I am in the early stages of creating a large application with AngularJS and RequireJS. All loads are found, but directives do not manipulate the DOM as they should. No errors are reported, and the rest of the application works fine: views are loaded, and $ scope is bound. Examining the console shows that all downloaded files. My guess is that the problem with lazy loading is that my directive just doesn't load at the right time. I would appreciate understanding how to properly load directives in this regard. If this is not part of Angular jqLite, please refrain from offering jQuery.

config.js

require.config({ paths: { angular: '../vendor/angular' } shim: { angular: { exports: 'angular' } } }); require(['angular'], function(angular) { angular.bootstrap(document, ['myApp']); }); 

myApp.js

 define(['angular', 'angular-resource'], function (angular) { return angular.module('myApp', ['ngResource']); }); 

routing.js

 define(['myApp', 'controllers/mainCtrl'], function (myApp) { return myApp.config(['$routeProvider', function($routeProvider) { ... }]); }); 

mainCtrl.js

 define(['myApp', 'directives/myDirective'], function (myApp) { return myApp.controller('mainCtrl', ['$scope', function ($scope) { ... }]); }); 

myDirective.js

 require(['myApp'], function (myApp) { myApp.directive('superman', [function() { return { restrict: 'C', template: '<div>Here I am to save the day</div>' } }]) }); 

home.html

 <div class="superman">This should be replaced</div> 

home.html is partial loaded in ng-view

Answer 1

Angular cannot load directives after it has been loaded. My suggestion:

• Make myDirective.js do a define() , not require()
• Make sure myDirective.js is executed before the require(['angular'],...) statement in config.js, for example. do require(['angular','myDirective'],...) . For this to work, myDirective should be myDirective to depend on angular - thanks to @David Grinberg.

As a side element, take a look at fooobar.com/questions/70009 / ... / this on GitHub , we tried to execute the RequireJS + Angular command.