在引导模式UI类角指令 [英] Angular class directive on bootstrap ui modal

问题描述

我做了A D irective为垂直居中元素的页上，但是当我试图使用它在一个bootstrap.ui.modal，这是行不通的。
限制：AC，

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',

指令：

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，但像模态生成的对象，这是行不通的

我觉得这是一个编译的问题，但我需要更好地理解这个问题。

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

推荐答案

我使用code做了一个例子。

I did an example using your code.

模态工作正常使用内部指令的 myModalContent.html

Modal is working fine using directive inside myModalContent.html

这是code在 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");
            });
        }
    };
});

这篇关于在引导模式UI类角指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！