AngularJS指令装载RequireJS不编译 [英] AngularJS directive loaded with RequireJS not compiling

问题描述

我在建设有AngularJS和RequireJS一个大的应用程序的开始阶段。一切加载找到，但指令没有操纵的DOM，他们应该。正在报告任何错误和应用程序的其余部分工作正常：查看加载和$范围可绑定。检查控制台显示加载的所有文件。我猜想这是我的指令根本就没有在正确的时间加载延迟加载的问题。我倒是AP preciate任何深入了解这方面的正确加载指令。除非它是角的jqLit​​e的一部分，请从提示的jQuery避免。

I'm in the beginning stages of building a large app with AngularJS and RequireJS. Everything loads find but directives aren't manipulating the DOM as they should. No errors are being reported and rest of the app works fine: Views are loaded and $scope is bindable. Examining the console shows that all the files loaded. I'm assuming this is a lazy load issue in that my directive is simply not loading at the correct time. I'd appreciate any insight into how to properly load directives in this regard. Unless it's a part of Angular's jqLite, please refrain from suggesting 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-视图的

推荐答案

角已自举后无法加载指令。我的建议是：

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

1. 请 myDirective.js 做定义（），而不是要求（）


2. 确保 myDirective.js 之前运行规定（['角']，...）在config.js声明，如做规定（['角'，'myDirective']，...）。 对于这项工作， myDirective 应匀依赖于角 - 感谢@戴维·格林贝格

1. Make myDirective.js do a define(), not a require()
2. Make sure myDirective.js is run before the require(['angular'],...) statement in config.js, e.g. do require(['angular','myDirective'],...). For this to work, myDirective should be shimmed to depend on angular - thanks @ David Grinberg.

一点题外话，看看这＃1 / < A HREF =htt​​ps://github.com/nikospara/angular-require-lazy相对=nofollow>这GitHub上，我们一直在努力做RequireJS +角一起玩。

As a sidenote, take a look at this in Stackoverflow/this in GitHub, we have been trying to do RequireJS + Angular play together.

这篇关于AngularJS指令装载RequireJS不编译的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！