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/>\

ng-style无法正常工作

1 个答案: