AngularJS模板+ Bootstrap模態

Question

我正在嘗試使用AngularJS動態創建一些Bootstrap模態，如此處所述： https ： //angular-ui.github.io/bootstrap/

為此，我在AngularJS的一個名為modalView.html的指令視圖內創建了一個基本腳本模板：

<script type="text/ng-template" **id="{{modalId}}.html"**>
<div class="modal-header">
    Header
</div>
<div class="modal-body">
    Body
</div>
<div class="modal-footer">
    Footer
</div>
</script>

這是我的指令（modalDirective.js）：

myDirectives.directive('modal', function () {
return {
    restrict: 'A',
    scope: {},
    templateUrl: 'shared/controls/modal/modalView.html',
    link: function (scope, element, attributes) {
        scope.modalId = attributes['modalId'];
    }
}
});

然后，我有另一個指令，它與文本框一起使用上述指令，該文本框應在單擊模式時打開模式。

modalTextboxView.html：

<div modal modal-id="{{modalId}}"></div>
<div textbox is-read-only="true" ng-click="openModal()"></div>

modalTextboxDirective.js：

myDirectives.directive('modalTextbox', function ($modal, $log) {
return {
    restrict: 'A',
    scope: {},
    templateUrl: 'shared/controls/modalTextbox/modalTextboxView.html',
    link: function (scope, element, attributes) {
        scope.modalId = attributes['fieldId'];
        scope.openModal = function(modalSize) {
            var modalInstance = $modal.open({
                **templateUrl: scope.modalId + '.html',**
                size: modalSize,
                resolve: {
                    items: function () {
                        return scope.items;
                    }
                }
            });

            modalInstance.result.then(function (selectedItem) {
                scope.selected = selectedItem;
            }, function () {
                $log.info('Modal dismissed at: ' + new Date());
            });
        }
    }
}
});

html輸出是預期的。 我可以看到第一個視圖的腳本模板ID已正確設置。 但是，當我單擊文本框時，出現錯誤404。似乎該模態試圖打開，但找不到定義的templateUrl，該模板也已正確設置。 此外，如果我只是在腳本模板的id字段中鍵入硬編碼的值，它就可以完美工作並打開模式。 不幸的是，我需要該ID是動態的，因為我需要能夠在我的頁面上創建和生成數量不確定的模態。

有任何想法嗎？

Answer 1

您不能使用<script type="text/ng-template">方法來定義動態綁定的模板id 。

所有這些角度是做（見SRC ），當它遇到這種類型的<script>標記的是，它增加了內容為$templateCache用的uninterpolated價值服務id屬性; 實際上，它是在compile時添加它的，然后才能進行插值。

因此，在模板上添加了"{{modalId}}.html" -從字面上看。 當您使用templateUrl: "ID123.html"請求時，將導致高速緩存未命中，並嘗試從不存在的URL下載。

那么，您實際上是想擺脫這種“動態”模態URL的方法是什么？

我不了解您的modal指令的用法-它試圖做的就是為模板動態分配一個id 。 為什么？ 如果只需要定義N個模板並在它們之間動態切換，則只需在modalTextbox指令中定義N個<script>標簽：

<script type="text/ng-template" id="modal-type-1">
  template 1
</script>
<script type="text/ng-template" id="modal-type-2">
  template 2
</script>
<div textbox is-read-only="true" ng-click="openModal()"></div>

並在$modal的調用中，如下設置templateUrl ：

$modal.open({
   templateUrl: "modal-type-" + scope.modalType,
   // ...
});