每次用 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。

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

Answer 1

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

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

因此，在使用

打开模式之前，您必须从缓存中删除缓存的URL

$templateCache.remove(scope.modalUrl);

另请参阅。

另一个想法是覆盖 $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 和类似的）。

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

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

asp.net-mvc

angularjs

angular-ui-bootstrap