從jQuery重寫一些代碼到Angular

Question

我剛剛學習，現在將我的代碼從jQuery重寫爲Angular，有一些問題，希望你能幫我解決它們。

當前HTML：

<div class='image_hold'> 
    <img class='image'> 
    <input type='hidden' name='image_answer' class='image_input'> 
</div> 

JS：

function loadGraphic() { 
    $.post('generate.php', { keyword: 'image' }) 
    .done(function(data) { 
     $('.image_input').val(data); 
     $('.image').attr('src', data); 
    }) 
    .fail(function(data) { 
     alert('error'); 
    }) 
}; 

那麼，究竟要來看看的代碼位的角度？ 我當前的嘗試：

$scope.loadGraphic = function() { 
    $http({ 
     method: 'POST', 
     url:  'generate.php', 
     data: image, 
    }) 
    .success(function(data) { 
    if (data.errors) { 
     $window.alert(error); 
    } else { 
     // 
    } 
    }); 
}; 

而且我想我必須在HTML類似ng-src添加...任何幫助將不勝感激。

Answer 1

您需要將返回的圖像src作爲$scope上的屬性添加以在模板中引用，然後像您說的那樣使用ng-src。希望這將成爲一個起點;

$scope.imageSrc = null; 

$scope.loadGraphic = function() { 
    $http({ 
     method: 'POST', 
     url:  'generate.php', 
     data: image, 
    }) 
    .then(function(data) { 
     $scope.imageSrc = data; 
    }) 
    .catch(function(errorResponse) { 
     // Handle errors in here 
    }); 
}; 

// Template 
<!-- ... --> 
<img ng-if="imageSrc" ng-src="imageSrc" class="image">