我正在执行从图像列表中选择图像的功能。我从每个按钮中都有一个“选择”按钮,并在单击按钮时调用 selectImage 方法。
角应用:
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']);
风景:
<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 部分与网格和分页一起使用
和每个项目的 ng-click="selectImage(39)" 按钮
PJAX 部分结束
毕竟在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();
});
在 pjax 通话后,我有一些奇怪的行为。当我单击选择按钮时,将调用 selectImage 方法。它会更改 selectedIMageUrl ,每次单击选择按钮时我都可以在 span 中看到不同的 url。但是图像(指定 ng-src 的位置)没有改变。
不过,在 pjax 调用之前,图像更改效果很好。
PS:我明白,做 jsFiddle 片段会更好,但我会遇到服务器端的问题。