Applying dynamically created CSS to a component using ng-style

Question

I have an angularjs component to create stylized pictures, but the style is not correctly applied the first time I visit a page (refreshing the pages shows the correct style). The CSS that is applied is generated dynamically based on the height and width properties of the image being styled.

Can anybody tell me why the CSS is applied on reload but not on the original load, and how to fix it so the CSS is applied the first time the page is loaded? Thanks!

In HTML I create a stylized picture:

<stylized-picture image-source="someImage.jpg"></stylized-picture>

The stylizedPicture component:

.component('stylizedPicture', {
    templateUrl: 'src/components/stylized-picture.template.html',
    bindings: {
      imageSource: '@imageSource',
    },
    controller: 'StylizedPictureController as stylizedPictureController'
});

stylized-picture.template.html:

<div ng-style="stylizedPictureController.outerCSS">
    <div ng-style="stylizedPictureController.innerCSS"></div>
       <div ng-style="stylizedPictureController.imgDivCSS">
           <img ng-src="{{stylizedPictureController.imageSource}}">
       </div>
    </div>
</div>

stylizedPictureController: The CSS is based on the image width/height.

.controller('StylizedPictureController', StylizedPictureController);

StylizedPictureController.$inject = ['$scope'];
function StylizedPictureController($scope) {
    var ctrl = this;

    ctrl.$onChanges = function() {
      var img = new Image();
      img.addEventListener("load", function() {
        ctrl.imgWidth = img.naturalWidth;
        ctrl.imgHeight = img.naturalHeight;

        // Fancy stuff to stylize image based on img h/w removed
        // simplified for example
        var paddingBottom = 100;
        ctrl.paddingBottom = paddingBottom;
        ctrl.outerCSS = {"padding-bottom: " + paddingBottom + "%"};
        ctrl.innerCSS = {"padding-bottom: " + paddingBottom + "%"};
        ctrl.imgDivCSS = {"padding-bottom: " + paddingBottom + "%"};
      });
      img.src = ctrl.imageSource;
    };
};

I have tried using the image.onLoad() method instead of the ctrl.$onChanges funtion/img eventListener, but have the same results. I have also tried setting ng-style inline, e.g. ng-style="{'padding-bottom': stylizedPictureController.paddingBottom}" but it doesn't make a difference.

use ng-class instead of ng-style to apply dynamically the class on the dom element. — Vishnu Mishra, Feb 23 '17 at 18:01
Hi Vishnu, switching ng-style to ng-class doesn't work (it no longer works on refresh). Could you please elaborate? — always_improve, Feb 23 '17 at 18:34
He means that you define a class with all the style (regular CSS) and simply apply the class instead of the style directly. Check ng-class documentation — yBrodsky, Feb 23 '17 at 20:45
Maybe I wasn't clear in my question, but the CSS is defined dynamically based on the properties of the image (width and height) that is being stylized so I can't use ng-class. From what I understand, ng-class is useful when your CSS is static, but not when the CSS is [dynamic](http://stackoverflow.com/questions/13813254/how-do-i-conditionally-apply-css-styles-in-angularjs) — always_improve, Feb 23 '17 at 21:41

score 0 · Accepted Answer · answered Feb 24 '17 at 00:14

I have found a solution, and thought I'd post it here in case anybody else has this problem in the future.

Adding:

$scope.$apply()

to the end of the image load EventListener, after the CSS has been generated and stored on the controller, fixes the issue. I believe this is happening because the image load is outside of the angularjs scope, and so when it finishes, angular doesn't know anything has changed and therefore doesn't update the ng-style binding. Forcing it to update the bindings with $scope.$apply() updates the ng-style.

Applying dynamically created CSS to a component using ng-style

1 Answers1