ページで AngularJs と Pjax の両方を使用しています。
ページの一部を Pjax でリロードすると、Angularjs がそこで動作しなくなります。
単純な {{ 2+2 }} は、pjax でリロードされた部分を除いてどこでも機能します。
問題は $compile の使用にあることがわかりました。
さまざまなコード スニペットを試しましたが、どれもうまくいきませんでした。
これも
angular.element(document).ready(function() {
angular.bootstrap(document);
});
これも
// 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();
});
コードスニペットがうまくいきました。誰かが実用的な解決策を知っていますか?
UPD: $("body") を $(document.body) に変更するという PSL のアドバイスの後、コードが機能し始めました。しかし、今ではすべてが最初から初期化されており、pjax 呼び出しのたびにデータ (私の例では選択した画像) が失われています。どうすればこれを回避できますか?
これは私のjsファイルです:
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']);