Javascript 使用ng样式将动态创建的CSS应用于组件

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

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

在HTML中我创建了一个样式化的图片：

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

样式化图片.template.html：

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

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

---

我尝试使用

image.onLoad（）

方法代替

ctrl.$onChanges

Function/

img

eventListener，但结果相同。我也尝试过设置

ng style

内联，例如

ng style=“{'padding-bottom'：StylezedPictureController.padding-bottom}”

，但这没有什么区别。

我找到了一个解决方案，我想在这里发布它，以防将来有人遇到这个问题

添加：

$scope.$apply()

---

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

使用ng类而不是ng样式在dom元素上动态应用该类。嗨，Vishnu，将ng样式切换到ng类不起作用（刷新时不再起作用）。你能详细说明一下吗？他的意思是你用所有样式（常规CSS）定义一个类，然后直接应用这个类而不是样式。检查ng类文档可能我的问题不清楚，但是CSS是根据正在样式化的图像属性（宽度和高度）动态定义的，所以我不能使用ng类。据我所知，ng类在CSS是静态的情况下是有用的，但在CSS是静态的情况下则不是

$scope.$apply()