Clever Geek Handbook

Angular class directive on bootstrap ui modal

I created a d for vertically centering elements on the page , but when I try to use it on bootstrap.ui.modal it doesn't work. limit: "AC",

Directive

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

Modal public function:

   $scope.openModal = function() {
    $modal.open({
        templateUrl: '/app/modal.html',
        controller: 'modalCtrl',
        windowClass: 'bg-center-vertically'
    });
   }

It works fine if I put it in normal index.html, but on generated objects like modals it doesn't work .

I think this is a compilation, but I need to understand the problem better.

+2


source to share


3 answers


Are you trying to register the moment when the directive is called and when your modal rendering is completely complete?



If the directive is called earlier, you must wait until your modal is fully loaded to add your attibute / prepertie directive to your modal.

0


source


If it's a compilation issue, 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");
            });
        }
    }
}
0


source


I used sample code.

The modal works fine using a 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");
            });
        }
    };
});
0


source






More articles: