使用 RequireJS 加载的 AngularJS 指令未编译

Question

我正处于使用 AngularJS 和 RequireJS 构建大型应用程序的开始阶段。所有内容都会加载 find，但指令并未按照应有的方式操作 DOM。没有报告任何错误，应用程序的其余部分工作正常: View 已加载并且 $scope 可绑定(bind)。检查控制台显示所有文件均已加载。我假设这是一个延迟加载问题，因为我的指令根本没有在正确的时间加载。如果您了解如何正确加载这方面的指令，我将不胜感激。除非它是 Angular 的 jqLit​​e 的一部分，否则请不要建议使用 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) {
    ...
  }]);
});

ma​​inCtrl.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 是加载到 ng-view 中的部分内容

Answer 1

Angular 在引导后无法加载指令。我的建议是:

1. 让 myDirective.js 执行 define()，而不是 require()
2. 确保 myDirective.js 在 config.js 中的 require(['angular'],...) 语句之前运行，例如执行 require(['angular','myDirective'],...)。 要实现此功能，myDirective 应该调整为依赖于 Angular - 感谢@David Grinberg。

作为旁注，请查看 this in Stackoverflow/this in GitHub ，我们一直在尝试做RequireJS + Angular 一起玩。