Шаблоны AngularJS + модальные окна Bootstrap

Я пытаюсь создать некоторые модальные окна Bootstrap динамически, используя AngularJS, как описано здесь: 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'];
    }
}
});

Затем у меня есть еще одна директива, которая использует вышеупомянутую директиву вместе с текстовым полем, которое должно открывать модальное окно при нажатии последнего.

модальныйтекстбоксвиев.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, как и ожидалось. Я вижу, что идентификатор шаблона сценария первого представления задан правильно. Однако, когда я нажимаю на текстовое поле, я получаю сообщение об ошибке 404. Кажется, модальное окно пытается открыться, но не может найти определенный templateUrl, который также был установлен правильно. Более того, если я просто ввожу жестко закодированное значение в поле id шаблона сценария, оно работает безупречно и открывает модальное окно. К сожалению, мне нужно, чтобы этот идентификатор был динамическим, поскольку мне нужно иметь возможность создавать и генерировать неопределенное количество модальных окон на моей странице.

Любые идеи?


angularjs bootstrap-modal angularjs-directive angular-ui-bootstrap
person Jose Rojas    schedule 01.05.2015    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы не можете использовать подход <script type="text/ng-template"> для определения динамически связанного шаблона id.

Все, что делает Angular (см. src), когда он встречает этот тип тега <script>, заключается в том, что он добавляет содержимое в службу $templateCache с неинтерполированным значением атрибута id; и, фактически, он добавляет его в compile раз, прежде чем его можно будет интерполировать.

Итак, шаблон добавлен с ключом "{{modalId}}.html" - дословно. И когда вы запрашиваете его с помощью templateUrl: "ID123.html", это приводит к промаху кеша и попытке загрузки с этого несуществующего URL-адреса.

Итак, что вы на самом деле пытаетесь получить от этого «динамического» модального URL-адреса?

Я не понимаю использования вашей директивы modal - все, что она пытается сделать, это динамически назначить id для шаблона. Почему? Если вам просто нужно определить N шаблонов и динамически переключаться между ними, просто определите N тегов <script> внутри вашей директивы modalTextbox:

<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,
   // ...
});
person New Dev    schedule 03.05.2015