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

Question

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

该指令包装了一个 Angular UI 模态，并使用transclude 填充模态元素（模态元素在声明该指令的控制器中定义）。问题是，如果使用 RequireJS 加载，模式不会显示任何元素（即它是空的）。

This is the plunk 正确工作的指令没有 RequireJS。您将看到一个填充了元素的模式。

This is the plunk 加载 with 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);

                };

            }
          }
    });
});

这就是我调用它的方式：

<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>

Answer 1

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

为 Modal 定义一个单独的 Angular 模块

// 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;
});

让应用依赖 Modal

// 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
});