CODEWITHSUNDEEP
javascriptangularjs
Deblaton Jean-Philippe
Deblaton Jean-Philippe

Reputation: 11388

ng-style not working properly

I need ng-style to set the height of a div inside a resizable div.

This is the controller code that is executed :

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


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

Here is my link function :

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

Here is the DOM when I display my div

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

When I resize my window, here is what I get :

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

Why is there this "height: 465px;", and why is my ng-style not applied?

Upvotes: 0

Views: 593

Answers (1)

Ben Diamant
Ben Diamant

Reputation: 6206

You should build you style variable as JSON

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

I would extend my answer with recommending you to use a scope variable into the ng-style tag instead of a binded one: 

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

Upvotes: 1

Related Questions