CODEWITHSUNDEEP
angularjsasp.net-mvcangular-ui-bootstrap
smoksnes
smoksnes

Reputation: 10851

Open brand new $modal with Angular UI.Bootstrap every time

I'm using AngularJS with ui.bootstrap and have a modal directive, which works fine.

myApp.directive("modalButton", ['$uibModal', function ($uibModal) {
    return {
        restrict: "A",
        scope: {
            modalUrl: '@',
            modalModel: '='
        },
        link: function (scope, element, attrs) {
            element.bind('click', function () {
                var modalInstance = $uibModal.open({
                    templateUrl: scope.modalUrl, // Here I want to use an url instead.
                    controller: 'editDeliveryCtrl as ctrl',
                    resolve: {
                        model: function () {
                            return scope.modalModel;
                        }
                    }
                });
            });
        }
    };
}]);

And used like:

<button type="button" class="btn btn-xs btn-default" modal-model="ctrl.currentDelivery" modal-button modal-url="@Url.Action("AddDelivery", "ProvisionContract", new {provisionContractId = Model.Id})">
    <span class="fa fa-plus" area-hidden="true"></span>
</button>

When a user clicks on a button with the directive a modal is shown. However, I'm using MVC.Net and the modals I'm loading is often a form with @Html.AntiForgeryToken() or other code-behind logic. So what I really want is to reload the template every time (make a new request to the server).

I've read question below and that may be a good answer, but what I really want is to not use templates at all. I would like $uibModal to load it as brand new HTML instead.

How to remove angular $modal cache?

Can I make $uibModal reload the template as brand new HTML each time? More like $.load in jQuery?

Upvotes: 1

Views: 866

Answers (1)

fracz
fracz

Reputation: 21248

All templates you load in the Angular app are stored in the $templateCache so they will not be downloaded the next time you are referring to them.

In your case, this is not the desired behavior as the HTML contents of the same URL may change over time.

Therefore, you have to remove the cached URL from the cache before opening the modal with

$templateCache.remove(scope.modalUrl);

Also, see How to remove angular $modal cache.

Another idea is to override the $templateCache's put method so it does not store some particular paths.

angular.module('yourApp').decorator('$templateCache', function($delegate) {
  var originalPut = $delegate.put;
  $delegate.put = function (templatePath, contents) {
    // specifiy conditions which would tell what paths should not be cached
    if (templatePath == '/this-should-not-be-cached.html' || templatePath.match(/some-regex/)) {
      return;
    }
    else {
      originalPut(templatePath, contents);
    }
  };
  return $delegate;
});

You can't just disable $templateCache because many libraries use it to store the templates that are shipped with them (e.g. ui-bootstrap and similar).

Upvotes: 1

Related Questions