Angular directive not working if loaded with RequireJS

Question

I have a directive that works correctly when RequireJS is not used, and I'm trying to migrate it to an application based on RequireJS.

The directive wraps an Angular UI modal, and uses transclude to populate the modal elements (modal elements are defined in the controller that declares the directive). The problem is that if loaded with RequireJS, the modal does not show ANY elements (i.e. it's empty).

This is the plunk of the directive that works correctly without RequireJS. You will see a modal populated with elements.

This is the plunk of the directive that is loaded with RequireJS. You will see that the modal is empty.

There are no errors thrown when the modal is displayed empty, so I'm not sure how to tackle this problem. Any help will be greatly appreciated.

This is the directive:

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

                };

            }
          }
    });
});

And this is how I invoke it:

<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

The issue is you have circular dependency. The app needs your modal module to display things correctly, but your modal directive needs that app. The solution is to load your modal directive into a separate module.

Define a separate Angular Module for 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;
});

Make app depend on 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
});