引導UI模態上的Angular類指令

Question

我已經對頁面上的垂直居中元素進行了改正 ，但是當我嘗試在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");
            });
        }
    };
});