smoksnes smoksnes - 3 months ago 32
AngularJS Question

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

I'm using AngularJS with

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 = ${
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>

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
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
to load it as brand new HTML instead.

How to remove angular $modal cache?

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


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


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/)) {
    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).