Question

我正处于使用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']);
});

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是部分加载到ng-view

Answer 1

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

让myDirective.js进行define()，而不是require()
确保在config.js中的myDirective.js语句之前运行require(['angular'],...)，例如做require(['angular','myDirective'],...)。 为了实现这一目标，myDirective应该采用angular进行调整，谢谢@ David Grinberg。

作为旁注，请看一下this in Stackoverflow / this in GitHub，我们一直在尝试同时进行RequireJS + Angular游戏。

加载了RequireJS的AngularJS指令未编译

1 个答案: