AngularJS шаблоны + Bootstrap модальность

Question

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

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

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

Любые идеи?

Answer 1

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

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

Итак, в шаблон добавлен ключ "{{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, 
    // ... 
});