I am attempting to pass angular's bootstrap modal the url of the image that was clicked in a angular masonry gallery. What I have is very close to the demo in the documentation with only a few changes. I know this is completely an issue with my own understanding of scope.
My modal HTML:
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<ul>
<li ng-repeat="item in items">
<a href="#" ng-click="$event.preventDefault(); selected.item = item">{{ item }}</a>
</li>
</ul>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
And in my Controller:
angular.module('testApp').controller('GalleryCtrl', function ($scope, $modal, $log) {
$scope.animationsEnabled = true;
$scope.items = ['item1', 'item2', 'item3'];
// Temporary Generation of images to replace with about us images
function genBrick() {
var height = ~~(Math.random() * 500) + 100;
var id = ~~(Math.random() * 10000);
return {
src: 'http://placehold.it/' + width + 'x' + height + '?' + id
};
};
this.bricks = [
genBrick(),
genBrick(),
genBrick(),
genBrick(),
genBrick(),
genBrick()
];
this.showImage = function(item){
alert(item.src); // gives me exactly what im trying to pass to the modal
var modalInstance = $modal.open({
animation: $scope.animationsEnabled,
templateUrl: 'views/modal.html',
scope: $scope,
controller: 'GalleryCtrl',
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
}
});
Lastly for clarity, this is my masonry code
<div masonry>
<div class="masonry-brick" ng-repeat="brick in gallery.bricks">
<img ng-src="{{ brick.src }}" alt="A masonry brick" ng-click="gallery.showImage(brick)">
</div>
</div>
Right now this works fine to return the items objects 3 values in li tags to the modal just like in the original example. What id really like to pass into the model is the (item.src) but no matter what i change it never seems to get passed in so that i can display it.
via
Chebli Mohamed
