I have a problem . My appplication invoke a ajax function and server return an html code button.
Script Angular
.controller('formController', ['$scope','$http', function($scope, $http) {
$scope.invia = function() {
$http({
method: 'POST',
url: 'prova.php',
data:{url:$scope.nome}
}).then(function successCallback(response) {
$("#AcquistaButton").remove();
$scope.data1=response.data;
}, function errorCallback(response) {
$("#AcquistaButton").remove();
$("#result").html("ERRORE");
});
}
}]);
Html code
<form ng-controller="formController" name="myForm" ng-submit="invia()" novalidate>
<input type="text" ng-model="nome"
name="nomeUtente" ng-maxlength="20"
ng-required="true">
<div ng-show="myForm.nomeUtente.$invalid">
Il nome utente è obbligatorio e non può superare i 20 caratteri
</div>
<button type="submit" >Invia</button>
</form>
<button id="AcquistaButton" type="submit" value="url" ng-mouseover="acquista ='button_acquista_off.png'" ng-mouseout="acquista ='button_acquista_on.png'" ng-init="acquista='button_acquista_off.png'">
<img class="img-responsive" ng-srcset="img/{{acquista}}"></button>
<div id="result"></div>
Find.php
<?php
$postdata = file_get_contents("php://input");
$request = json_decode($postdata);
$utente = $request->utente;
header("location:button.html");
?>
button.php
<button id="RichiediButton" type="submit" value="url" ng-mouseover="richiedi ='button_Richiedi_off.png'" ng-mouseout="richiedi ='button_Richiedi_on.png'" ng-init="richiedi='button_Richiedi_off.png'">
<img class="img-responsive" ng-srcset="img/{{richiedi}}">
</button>
Why html code that returns the server does not appear ?
I add this filter
.filter("sanitize", ['$sce', function($sce) {
return function(htmlCode){
return $sce.trustAsHtml(htmlCode);
}
and apply with this sintax:
`<div ng-bind-html="data1 | sanitize"></div>
the code is changed but the image is not loaded although the path is correct