2016-04-15 2 views
3

У меня есть модальный шаблон в другом html-файле, но после того, как страница была загружена, первое модальное окно открывается без содержимого, второй раз все в порядке. Как это можно зафиксировать?Угловой модал: добавьте шаблон из другого html

Вот plunker http://plnkr.co/edit/lw056nAaU7BfqIVZSddb?p=preview

//Open modal on main page with: 
<div ng-controller="ModalDemoCtrl"> 
<button type="button" class="btn btn-default" ng-click="open()">Open me!</button> 
<button type="button" class="btn btn-default" ng-click="open('lg')">Large modal</button> 
<button type="button" class="btn btn-default" ng-click="open('sm')">Small modal</button> 
<button type="button" class="btn btn-default" ng-click="toggleAnimation()">Toggle Animation ({{ animationsEnabled }})</button> 
<div ng-show="selected">Selection from a modal: {{ selected }}</div> 

ответ

3

Вы не должны обертывать ваш шаблон <script type="text/ng-template" id="myModalContent.html"></script>.

Ui-modal ожидает прямой HTML здесь.

Если вам нужно использовать нг-шаблон, вы должны вставить сценарий тег нг-шаблон в вашем index.html (или где-нибудь еще, но он должен быть загружен на вашей странице) и открыть модальный с template вместо templateUrl это путь:

var modalInstance = $uibModal.open({ 
     animation: $scope.animationsEnabled, 
     template: "<div ng-include src=\"'myModalContent.html'\"></div>", 
     controller: 'ModalInstanceCtrl', 
     size: size, 
     resolve: { 
     items: function() { 
      return $scope.items; 
     } 
     } 
}); 
+0

Спасибо, Пьер он отлично работает :) – kipris

+0

круто вы можете установить его на правильный ответ! пожалуйста ? –

+0

Я обновил плункер – kipris

0

Может быть, вы можете использовать $templateCache в этом случае вместо того, чтобы загрузить шаблон из другого файла. Я не знаю, почему у вас есть эта проблема, но это решило проблему для меня.

Возможно, вы не ищете что-то подобное, так как это увеличивает размер файла JS, и иногда этот шаблон никогда не будет использоваться.

angular.module('ui.bootstrap.demo').run(['$templateCache', function ($templateCache) { 

    $templateCache.put('myModalContent.html', 
     'Hello World' 
    ); 

}]); 

Как вы думаете?

EDIT: @Pierre Maoui ответ кажется более адекватным для меня на основе вопроса.

+0

Да, это работает, но если добавить HTML-теги вместо «Hello World» модальные craches :( – kipris

Смежные вопросы