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

<divng-app="app"><divng-controller="CustomerController"><buttonclass="btn btn-default"ng-click="open(customer)">{{ message }}</button><br /><!--MODAL WINDOW--><scripttype="text/ng-template"id="myModalContent.html"><divflash><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");
            });
        }
    };
});