使用 ng-style 将动态创建的 CSS 应用于组件

Question

我有一个 angularjs 组件来创建风格化的图片，但是我第一次访问页面时没有正确应用风格（刷新页面显示正确的风格）。所应用的 CSS 是根据正在设置样式的图像的高度和宽度属性动态生成的。

谁能告诉我为什么 CSS 在重新加载时应用而不在原始加载时应用，以及如何修复它以便在第一次加载页面时应用 CSS？谢谢！

在HTML我创建了一个风格化的图片：

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

风格化图片组件:

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

程式化-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: CSS是基于图像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;
    };
};

我尝试使用 image.onLoad() 方法代替 ctrl.$onChanges 函数/img eventListener，但结果相同。我也试过设置 ng-style 内联，例如ng-style="{'padding-bottom': stylizedPictureController.paddingBottom}" 但这并没有什么不同。

Answer 1

我找到了解决方案，我想我会 post 把它放在这里，以防将来其他人遇到这个问题。

添加：

$scope.$apply()

到图像加载 EventListener 结束，在 CSS 生成并存储在控制器上后，修复了该问题。我相信这是因为图像加载在 angularjs 范围之外，所以当它完成时，angular 不知道有什么改变，因此不会更新 ng-style 绑定.强制它使用 $scope.$apply() 更新绑定会更新 ng 样式。

使用 ng-style 将动态创建的 CSS 应用于组件

Applying dynamically created CSS to a component using ng-style

javascript

angularjs

angularjs-components