I am using both AngularJs and Pjax on the page.
After a part of my page is reloaded with Pjax, Angularjs stops working there.
Simple {{ 2+2 }} works everywhere except the part, reloaded with pjax.
I have found, that the problem is in using $compile.
I have tried different code snippets, but none of them worked for me.
Neither this one
angular.element(document).ready(function() {
angular.bootstrap(document);
});
nor this
// outside of angular...
var ngRefresh = function() {
var scope = angular.element("body").scope();
var compile = angular.element("body").injector().get('$compile');
compile($("body").contents())(scope);
scope.$apply();
}
// PJAX
$('#page').on('pjax:success', function(e){
ngRefresh();
});
code snippets worked for me. Does anybody know a working solution?
UPD: After PSL's advice to change $("body") to $(document.body) the code started to work. But now everything is initialized from scratch and I loose my data (selected image in my example) after every pjax call. How can I avoid this?
This is my js file:
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']);
