每次都使用 Angular UI.Bootstrap 打开全新的 $modal

Question

我将 AngularJS 与 ui.bootstrap 一起使用，并且有一个模态指令，效果很好。

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

并像这样使用：

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

当用户点击带有指令的按钮时，会显示一个模式。但是，我使用的是 MVC.Net，并且我正在加载的模式通常是带有 @Html.AntiForgeryToken() 或其他代码隐藏逻辑的表单。所以我真正想要的是每次都重新加载模板（向服务器发出新请求）。

我已经阅读了下面的问题，这可能是一个很好的答案，但我真正想要的是根本不使用模板。我希望 $uibModal 将其加载为全新的 HTML。

How to remove angular $modal cache?

我可以让$uibModal 每次都将模板重新加载为全新的 HTML 吗？更像 jQuery 中的 $.load？

Answer 1

您在 Angular 应用程序中加载的所有模板都存储在 $templateCache 中，因此下次您引用它们时将不会下载它们。

在您的情况下，这不是所需的行为，因为同一 URL 的 HTML 内容可能会随着时间而改变。

因此，您必须在使用打开模式之前从缓存中删除缓存的 URL

$templateCache.remove(scope.modalUrl);

另外，请参阅How to remove angular $modal cache。

---

另一个想法是重写$templateCache 的 put 方法，这样它就不会存储一些特定的路径。

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

您不能只禁用 $templateCache，因为许多库使用它来存储它们附带的模板（例如 ui-bootstrap 和类似的）。