I am encountering an issue with dynamic data stored in the database. When trying to apply a style to a div element retrieved from the server response, I am facing difficulties with implementing it using ng-style.
If the data is static, everything works fine. Here is an example of my static HTML:
<div ng-controller="empty" >
<div>
<div ng-bind-html="validData | unsafe"/>
</div>
</div>
However, when the data is fetched from the database, the styling does not get applied as expected. Below is the code snippet for the dynamic content:
<div class="row">
<div ng-style="visualization" class="col-md-4">.col-md-2</div>
<div ng-style="visualization" class="col-md-8">.col-md-8</div>
</div>
<div class="row">
<div ng-style="visualization" class="col-md-4">.col-md-8</div>
</div>
To tackle this issue, I have set up a controller that handles the data retrieval and styling assignment:
$http.get(globalVars + 'page/' + lastParam)
.success(function (data) {
$scope.empty = data;
$scope.validData = $scope.empty.layout.schema;
$compile($scope.validData);
if(typeof $rootScope.mode == 'undefined' || $rootScope.mode =='edit'){
$scope.visualization = {
"border-style": "dashed"
}
}
else{
$scope.visualization = {
"border-style": "none"
}
}
})
.error(function (data) {
});
Despite setting the styling in the controller, the ng-style directive is not properly binding the styles to the Angular application. Any assistance on resolving this issue would be greatly appreciated. Thank you!