CODEWITHSUNDEEP
angularjsangular-ui-bootstrap
Bobby Shark
Bobby Shark

Reputation: 1074

AngularJS bootstrapUI : How to render a dynamic page inside the modal?

I'm using the modal function to display a full sized image. 

            $scope.openModalPicture = function (id) {
                var modalInstance = $modal.open({
                    templateUrl: '../user/picture/'+id,
                    controller: ModalInstanceCtrl
                });
            };

So if I call in my browser http://whatever.com/user/picture/10 it will render some html with the picture. The problem is that angular loads the http://whatever.com/user/picture/10 at page load. If the picture of user 10 change after the page load and I click to call openModalPicture function, I still get the previous image.

I figured out that the templateUrl is just a local template and everything goes with $scope variables. The only solution seems to retrieve the data I need through $http request and fill the local templateUrl, or is there another trick?

Edit : See the plunker http://plnkr.co/edit/ZkhaSfE7yafiRciOKLt8?p=preview

Upvotes: 0

Views: 1135

Answers (1)

Yaron Schwimmer
Yaron Schwimmer

Reputation: 5357

You can pass parameters to your modal. so if you have the right URL for your picture in your main controller, just pass it the modal when you open it.

$scope.openModal = function () {
    var modalInstance = $modal.open({
        templateUrl: 'modal.html',
        controller: ModalInstanceCtrl,
        size:'sm',
        resolve: {
            picture: function() {
                //you can pass any other parameter instead of hard-coded string of course
                return "http://freedogpics.com/wp-content/uploads/2014/08/pictures_1407299643.jpg";
            }
        }
    });
};

var ModalInstanceCtrl = function ($scope, $modalInstance, picture) {
    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
    $scope.picture = picture;
};

and the template:

<table cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td valign="top"><span ng-click="cancel()">Close</span></td>
    <td><img ng-src="{{picture}}" border="0"/></td>
  </tr>
</table>

I've modified your plunkr with an example.

Upvotes: 1

Related Questions