Tengo un elemento li en el que estamos llamando a un método SiteAssetStyleForShiftedAsset como este:
<li class="holder-white title-holder" data-ng-style="{{SiteAssetStyleForShiftedAsset()}}"> ... </li>y desde nuestro controlador javascript se llama así:
function SiteAssetStyleForShiftedAsset() { var isPPMJob = localStorage.getItem("IsPPMJob").toUpperCase(); var shiftingAsset = $scope.addClassForShiftingAsset; if (isPPMJob == "FALSE") { // it is working fine here. Margin is being applied correctly. return { "margin-right": "50px" }; } else if (isPPMJob == "TRUE") { if (shiftingAsset.toUpperCase() == "TRUE") { //it is not working fine on this line. Margin is not being applied. return { "margin-right": "50px" }; } else { return { "padding-right:": "15px" }; } } }Por lo tanto, funciona bien en el primer caso si (isPPMJob == "FALSO") , pero en el caso contrario, si estamos comprobando shiftingAsset.toUpperCase() == "VERDADERO" , ese margen no se está aplicando.
Las alertas probadas en todas las condiciones se muestran bien, pero los márgenes están causando problemas.
Encontré solución para ese problema. El problema era con el código HTML que estábamos usando estilo data-ng como este
data-ng-style="{{SiteAssetStyleForShiftedAsset()}}"en lugar de esto tenemos que usarlo como
data-ng-style="{'margin-right': SiteAssetStyleForShiftedAsset()}"Luego, en el controlador JS, simplemente devuelva el valor del margen, es decir, "10px", "50px", etc.
function SiteAssetStyleForShiftedAsset() {
var isPPMJob = localStorage.getItem("IsPPMJob").toUpperCase(); var shiftingAsset = $scope.addClassForShiftingAsset; if (shiftingAsset == "false"){ //alert("abc"); return "10px"; //return { "padding-right:": "15px" }; } else{ return "50px"; } }