加载了RequireJS的AngularJS指令未编译

我正处于使用AngularJS和RequireJS构建大型应用程序的开始阶段。加载的所有内容都可以找到，但指令并没有像它们应该的那样操纵DOM。未报告任何错误，应用程序的其余部分工作正常：视图已加载，$scope可绑定。检查控制台显示已加载所有文件。我假设这是一个延迟加载问题，因为我的指令没有在正确的时间加载。在这方面，如果能深入了解如何正确加载指令，我将不胜感激。除非它是Angular的jqLite的一部分，否则请不要建议使用jQuery

config.js

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

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

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

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

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

myApp.js

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

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

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

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

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

routing.js

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

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

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

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

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

mainCtrl.js

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

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

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

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

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

myDirective.js

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

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

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

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

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

require（['myApp']，函数（myApp）{
myApp.directive（'superman'，[function（））{
返回{
限制：“C”，
模板：“我来拯救这一天”
}
}])
});

home.html

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

这应该被替换

---

home.html是一个已加载到ng view的部分，在引导后无法加载指令。我的建议是：

使

myDirective.js

执行

define（）

，而不是

require（）

确保在config.js中的

require（['angular'，…）

语句之前运行

myDirective.js

，例如do

require（['angular'，'myDirective'，…）

为使其正常工作，

myDirective

应根据

angular

-谢谢@David Grinberg。

---

作为旁注，请看一下/，我们一直在尝试一起进行RequireJS+角度播放。

Arrrr！！！甚至没有注意到我在做的是“要求”而不是“定义”。为此奋斗了很久。这就解决了问题。非常感谢。我肯定会看看你的Github项目。在你的例子#2中，

myDirective

不是在

angular

之后运行吗？这还不管用吗？另外，您以前会如何运行它？它不会抱怨角度没有定义吗？@DavidGrinberg你说得很对。我忘了说，对于第二种情况来说，

myDirective

应该根据角度进行填充。更新答案。（从技术上讲，

angular

和

myDirective

将运行的顺序是未指定的，RequireJS异步加载它们。）您再次声明“确保myDirective.js在…之前运行”，但在您的编辑中，您仍然添加了它应该简化为依赖于angular。这不是很有争议吗？如果依赖于myDirective，它怎么能在angular之前运行呢？我做错了什么？根据@Nikos

myDirective提供的解决方案，应该在
MyApp
启动引导之前定义指令。但是
myDirective
将
myApp
（它执行引导）作为一个依赖项，并使用它来注册自身，这不对吗？