Angularjs 如果加载了RequireJS，Angular指令不起作用

我有一个指令，在不使用RequireJS时可以正常工作，我正在尝试将它迁移到基于RequireJS的应用程序中

该指令包装一个角度UI模态，并使用

transclude

填充模态元素（模态元素在声明该指令的控制器中定义）。问题是，如果加载了RequireJS，模态就不会显示任何元素（即，它是空的）

在没有要求的情况下正常工作的指令的。您将看到一个填充了元素的模态

使用RequireJS加载的指令的。您将看到模态为空

当模态显示为空时不会抛出错误，因此我不确定如何解决此问题。任何帮助都将不胜感激

这是指令：

define(['app','uiBootstrap'], function (app) {

'use strict';
app.directive("theModal", function($timeout,$uibModal) {
          return {
            restrict: "AE",        
            scope: {              
                control: '='
            },
            transclude: true,
            link: function (scope, element, attrs, ctrl, transclude) {

              scope.control = scope.control || {}

                scope.control.openModal = function () {

                var instance = $uibModal.open({
                      animation: false,
                      scope: scope,
                      windowClass: 'the-modal',
                      template: '<div>in the template</div><div class="content"></div>',
                      appendTo: element
                });

                $timeout(function (){
                     transclude(scope.$parent, function(clonedContent){
                       element.find('.content').append(clonedContent);  
                     })
                },10);

                };

            }
          }
    });
});

define（['app'，'uiBootstrap'，函数（app）{
"严格使用",；
指令（“theModal”，函数（$timeout，$uibModal）{
返回{
限制：“AE”，
范围：{
控件：'='
},
是的，
链接：函数（范围、元素、属性、ctrl、transclude）{
scope.control=scope.control | |{}
scope.control.openModal=函数（）{
var实例=$uibModal.open({
动画：错，
范围:范围,，
windowClass:“模态”，
模板：'在模板中'，
附录：元素
});
$timeout（函数（）{
转移（范围$parent，函数（克隆内容）{
元素.find（'.content'）.append（clonedContent）；
})
},10);
};
}
}
});
});

这就是我调用它的方式：

<div ng-controller="ctl">

    <button ng-click="open()">open it!</button>

    <div the-modal control="modalCtl">
        <p>some text</p>
        <input type="text" ng-model="input1" />
    </div>

</div>

打开它！
一些文本

问题是您有循环依赖关系。应用程序需要模态模块来正确显示内容，但模态指令需要该应用程序。解决方案是将模态指令加载到单独的模块中

为Modal定义单独的角度模块

// contents of modal.js (remove app dependency)
define(['uiBootstrap'], function () {
    'use strict';
    var mod = angular.module('modal', ['ui.bootstrap']);
    mod.directive("theModal", function($timeout, $uibModal) {
        return {
            restrict: "AE",        
            scope: {              
                control: '='
            },
            transclude: true,
            link: function (scope, element, attrs, ctrl, transclude){
              // removed code for brevity
            }
        }
    });
    mod.directive("theButton", function($timeout) {
        return {
            restrict: "AE",        
            scope: {              
                control: '='
            },
            transclude: true,
            link: function (scope, element, attrs, ctrl, transclude){
              // removed code for brevity
            }
        }
    });
    return mod;
});

// contents of app.js
define([
    'angular',
    'uiBootstrap',
    'uiRouter',
    'modal'         // <--- the modal.js directive
], function (angular) {
    'use strict';
     return angular.module('app', ['ui.bootstrap','ui.router', 'modal']); // <--- also add it here
});

使应用程序依赖于模式

// contents of modal.js (remove app dependency)
define(['uiBootstrap'], function () {
    'use strict';
    var mod = angular.module('modal', ['ui.bootstrap']);
    mod.directive("theModal", function($timeout, $uibModal) {
        return {
            restrict: "AE",        
            scope: {              
                control: '='
            },
            transclude: true,
            link: function (scope, element, attrs, ctrl, transclude){
              // removed code for brevity
            }
        }
    });
    mod.directive("theButton", function($timeout) {
        return {
            restrict: "AE",        
            scope: {              
                control: '='
            },
            transclude: true,
            link: function (scope, element, attrs, ctrl, transclude){
              // removed code for brevity
            }
        }
    });
    return mod;
});

// contents of app.js
define([
    'angular',
    'uiBootstrap',
    'uiRouter',
    'modal'         // <--- the modal.js directive
], function (angular) {
    'use strict';
     return angular.module('app', ['ui.bootstrap','ui.router', 'modal']); // <--- also add it here
});

//app.js的内容
定义([
"棱角",，
“uiBootstrap”，
“uiRouter”，
'modal'//在我看来，RequireJS不适合Angular JS。基本上，RequireJS只允许您在需要时加载资源。但问题是，Angular应用程序在启动时需要所有服务、控制器、指令等。在您的情况下，使用RequireJS测试应用程序时不会出现任何错误，因为e Angular编译HTML模板时，它只会忽略“the modal”指令，因为Angular应用程序不知道该指令。我的应用程序中有大量指令，我无法为每个指令定义一个模块。你不必这样做。你可以将它们全部添加到modal.js。只需将其重命名为合理的指令。一个应用程序中有几十个指令ce文件？顺便说一句，您的解决方案似乎不起作用，请看这个例子：问题不在于解决方案。问题在于
样式中的css。css
。试试这个：另外，我不一定建议您将所有指令都包含在一个文件中，这只是一个选项。这取决于您的使用情况。