Öffnen Sie brandneue $ modal mit eckigen UI.Bootstrap jedes Mal

Question

Ich benutze AngularJS mit ui.bootstrap und haben eine modale Direktive, die gut funktioniert.

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; 
         } 
        } 
       }); 
      }); 
     } 
    }; 
}]); 

und verwendet wie:

<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> 

Wenn ein Benutzer klickt auf eine Schaltfläche mit der Richtlinie ein modal dargestellt ist. Jedoch verwende ich MVC.Net und die modals, die ich lade, ist häufig eine Form mit @Html.AntiForgeryToken() oder anderer Code-behind Logik. Also, was ich wirklich will, ist die Vorlage jedes Mal neu zu laden (eine neue Anfrage an den Server).

Ich habe Frage unten gelesen und das kann eine gute Antwort sein, aber was ich wirklich will, ist überhaupt keine Vorlagen zu verwenden. Ich möchte $uibModal, um es stattdessen als brandneuen HTML zu laden.

How to remove angular $modal cache?

Kann ich $uibModal machen laden Sie die Vorlage als brandneue HTML jedes Mal? Mehr wie $.load in jQuery?

Answer 1

Alle Vorlagen, die Sie in die Angular-App laden, werden in der $templateCache gespeichert, damit sie beim nächsten Mal nicht heruntergeladen werden.

In Ihrem Fall ist dies nicht das gewünschte Verhalten, da sich der HTML-Inhalt derselben URL im Laufe der Zeit ändern kann.

Daher haben Sie die im Cache gespeicherten URL aus dem Cache zu entfernen, bevor die modalen mit

$templateCache.remove(scope.modalUrl); 

Auch Öffnen finden How to remove angular $modal cache.

---

Eine weitere Idee ist die $templateCache ‚s Put-Methode außer Kraft zu setzen, damit es nicht einige bestimmte Pfade speichert.

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; 
}); 

können Sie nicht nur $templateCache deaktivieren, da viele Bibliotheken es verwenden, um die Vorlagen zu speichern, die mit ihnen (z ui-Bootstrap und ähnlichen) versandt werden.