4

我正处于使用 AngularJS 和 RequireJS 构建大型应用程序的开始阶段。一切都加载找到，但指令没有按应有的方式操作 DOM。没有报告错误，应用程序的其余部分工作正常：视图已加载并且 $scope 是可绑定的。检查控制台显示已加载所有文件。我假设这是一个延迟加载问题，因为我的指令根本没有在正确的时间加载。对于如何正确加载这方面的指令，我将不胜感激。除非它是 Angular 的 jqLit​​e 的一部分，否则请不要推荐 jQuery。

配置.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']);
});

路由.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>'
    }
  }])
});

主页.html

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

home.html 是加载到 ng-view 的部分

4

1 回答 1

7

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

  1. 做myDirective.js一个define()，而不是一个require()
  2. 确保在 config.js 中myDirective.js的语句之前运行，例如 do 。为此，应该依赖于- 谢谢@David Grinberg。require(['angular'],...)require(['angular','myDirective'],...)myDirectiveangular

作为旁注，看看Stackoverflow 中的这个/ GitHub中的这个，我们一直在尝试一起做 RequireJS + Angular 的游戏。

于 2013-09-13T12:48:01.740 回答