Question

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

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

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

使用 RequireJS加载的指令的
This is the plunk。你会看到模态是空的。

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

这是指令：

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

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

为模态定义单独的角度模块

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

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

1 个答案: