ng样式无法正常工作

Question

我需要ng-style来设置可调整大小的div内div的高度。

这是执行的控制器代码：

    $scope.uploadDropStyle = {
        height: $scope.$parent.state.size.window.height - calculateDeduction()
    };


    $scope.$on("window:resize", function (event, width, height) {
        $scope.uploadDropStyle.height = height - calculateDeduction();
    });

这是我的链接功能：

        link: function (scope, element, attributes, controller) {
            var markup = '<div style="display:table"><form name="fieldEditor" class="entityEditor emailEditor">';
            markup += <div class="fileTransferContainer" ng-style="{{uploadDropStyle}}"><br/><hr/>\
         <few html removed here>
                                </div>\
                           </div>\
                        </div>';
            element.html(markup);
            $compile(element.contents())(scope);
        }
    }

这是显示div时的DOM

  <div class="fileTransferContainer" style="height: 465px;" ng-style="{&quot;height&quot;:465}">

当我调整窗口大小时，这是我得到的：

 <div class="fileTransferContainer" style="height: 465px;" ng-style="{&quot;height&quot;:146}">

为什么会有这个“高度：465px;”，为什么我的ng样式没有应用？

Answer 1

您应该将样式变量构建为JSON

$scope.uploadDropStyle = {
    "height": $scope.$parent.state.size.window.height - calculateDeduction() + "px"
};

我会通过建议您在ng-style标记中使用范围变量而不是绑定的变量来扩展答案：

markup += <div class="fileTransferContainer" ng-style="uploadDropStyle"><br/><hr/>\