引导 ui 模式上的 Angular 类指令答案

【问题标题】：Angular class directive on bootstrap ui modal引导 ui 模式上的 Angular 类指令
【发布时间】：2015-04-28 11:44:17
【问题描述】：

我已经为页面上的垂直居中元素制作了一个 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 上它可以正常工作，但在生成的对象上，如 modals，它就不起作用。

我认为这是一个编译问题，但我需要更好地理解这个问题。

【问题讨论】：

标签： javascript angularjs twitter-bootstrap

【解决方案1】：

您是否尝试记录调用指令的时刻以及您的模态完全呈现的时刻？

如果之前调用了该指令，则必须等待模态的完整加载才能将指令属性/属性附加到模态。

【讨论】：

是的，我试过了。我认为问题在于该指令是在 templateUrl 中声明的，并且不是由 Angular 编译的。但是我真的不知道怎么解决。
编译问题可以看$compile

【解决方案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");
            });
        }
    }
}

【讨论】：

【解决方案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>

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

【讨论】：