0

I am doing a functionality of selecting an image from the image list. I have a button "select" from every button and call selectImage method on button-click.

AngularApp:

app = angular.module("BlogImageApp", []);

app.controller("BlogImageController", function($http, $scope){

$scope.selectedImageId = null;
$scope.selectedImageUrl = "";

$scope.selectImage = function(image_id) {
    $scope.selectedImageId = image_id;
    var params = 'id='+image_id;
    $http.get('/blog/image/get-url-by-id?'+params).success(function(data){
        $scope.selectedImageUrl = data;
    });
}
});

// registers the BlogImageApp in the view
angular.bootstrap(document, ['BlogImageApp']);

The view:

<div id="blog-images" ng-controller="BlogImageController">
<div ng-show="selectedImageId == null" style="height:50px; margin-bottom:5px;">
    <div class="alert alert-info">
        <span class="glyphicon glyphicon-info-sign"></span>
        The image isn't selected!
    </div>
</div>
<div class="blog-selected-image" ng-hide="selectedImageUrl == ''">
    <b>The selected image: <span ng-bind="selectedImageUrl"></span>   </b><br/>
    <img ng-src="{{selectedImageUrl}}" class="img-thumbnail" style="height:200px">
</div>

... PJAX PART GOES HERE WITH GRID AND PAGINATION

and button with ng-click="selectImage(39)" for every item

PJAX PART ENDS

And after all in javascript:

var ngRefresh = function() {
var scope = angular.element(document.body).scope();
var compile = angular.element(document.body).injector().get('$compile');
compile($(document.body).contents())(scope);
scope.$apply();
}

// PJAX
$(document.body).on('pjax:success', function(e){
  ngRefresh();
});

After pjax call I have some strange behaviour. When I click a select button, selectImage method is invoked. It changes selectedIMageUrl and I can see different url in span every time I click select button. But the image (where ng-src specified) doesn't change.

Image changing worked great before pjax call though.

PS: I understand, that it would be better to do jsFiddle snippet, but I would have problem with server side.

0 Answers0