ng 样式无法正常工作答案

【问题标题】：ng-style not working properlyng 样式无法正常工作
【发布时间】：2015-02-11 03:26:37
【问题描述】：

我需要 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}">

为什么会有这个“height: 465px;”，为什么我的ng-style没有应用？

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

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

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

我会扩展我的答案，建议您在 ng 样式标签中使用范围变量而不是绑定标签：

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

【讨论】：

我找到了另一个解决方案："{\'height\' : (uploadDropStyle.height) + \'px\'}" 但你的更好
伟大的@DeblatonJean-Philippe