Angular Class Directive On Bootstrap Ui Modal

I've made a directive for vertically centering elements on page, but when I'm trying to use it on a bootstrap.ui.modal, it doesn't work. restrict: 'AC', Directive: link: function(

Solution 1:

Have you try to log the moment when the directive is called and when your modal are completly rendering ?

If the directive is called before, you must wait the complete loading of your modal to append your directive attibute/prepertie to your modal.

Solution 2:

If it's compilation issue, then you can try something like this:

//instead of link:
compile: function (e) {
    e.trigger('create');
    return {
        post: function(scope, element, attrs) {
            console.log(element.prop('offsetHeight'));
            scope.$watch(function() {
                return [element[0].clientHeight].join('x');
            }, function(value) {
                var currentHeight = parseInt(value.split('x'));
                var currentMarginTop = ($window.innerHeight - currentHeight) / 2;
                element.css('margin-top', currentMarginTop + "px");
            });
        }
    }
}

Solution 3:

I did an example using your code.

Modal is working fine using directive inside myModalContent.html

This is the code in jdffidle

HTML

<div ng-app="app">
       <div ng-controller="CustomerController">  
            <button class="btn btn-default" ng-click="open(customer)">{{ message }}</button> <br />
                <!--MODAL WINDOW--> 
                <script type="text/ng-template" id="myModalContent.html">
                    <div flash>
                        <h3>The Customer Name is: {{ customer }}</h3>
                    </div>                   
                </script>
        </div>
</div>

JS

var app = angular.module('app', ['ui.bootstrap']);

app.controller('ModalInstanceCtrl', function ($scope, $modalInstance)
{
$scope.customer = "Gumarelo!";

});

app.controller('CustomerController', function($scope, $timeout, $modal, $log) {

    $scope.message = "Hello Customer. Click to center vertically your Name :D";

    // MODAL WINDOW
    $scope.open = function (_customer) {

        var modalInstance = $modal.open({
          controller: "ModalInstanceCtrl",
          templateUrl: 'myModalContent.html',
          windowClass: 'bg-center-vertically'
             });

    };

});


app.directive("flash", function($window) {
    return {
        restrict: "AC",
        link: function(scope, element, attrs) {
            console.log(element.prop('offsetHeight'));
            scope.$watch(function() {
                return [element[0].clientHeight].join('x');
            }, function(value) {
                var currentHeight = parseInt(value.split('x'));
                var currentMarginTop = ($window.innerHeight - currentHeight) / 2;
                element.css('margin-top', currentMarginTop + "px");
            });
        }
    };
});