Угловая директива класса на bootstrap ui modal

Question

Я создал a d для вертикально центрирующих элементов на странице, но когда я пытаюсь использовать его на bootstrap.ui.modal, он не работает. ограничения: '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"); 
    }); 
} 

Модальные открытая функция:

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

Он отлично работает, если я ставлю его на регулярной index.html, но созданных объектов как модальные, он не работает.

Я думаю, что это компиляция, но мне нужно лучше понять проблему.

Answer 1

Вы пытаетесь зарегистрировать момент, когда вызывается директива, и когда ваш модальный рендеринг полностью завершен?

Если директива вызывается раньше, вы должны дождаться полной загрузки вашего модального файла, чтобы добавить свою директиву attibute/prepertie к вашему модальному.

Answer 2

Если это проблема компиляции, то вы можете попробовать что-то вроде этого:

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

Answer 3

Я сделал пример использования кода.

Модальные работает отлично с помощью директивы внутри myModalContent.html

Это код в 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"); 
      }); 
     } 
    }; 
});