AngularJS & Bootstrap Modal - загрузочный шаблон внешнего контроллера

Question

У меня есть диалог, который используется в трех сценариях на той же странице. Я создал контроллер, аналогичный приведенному ниже:

var modalInstance = $modal.open({ 
    templateUrl: 'myModalContent.html', 
    controller: 'ModalInstanceCtrl', 
    size: size, 
    resolve: { 
    items: function() { 
     return $scope.items; 
    } 
    } 
}); 


<script type="text/ng-template" id="myModalContent.html"> 
    <div class="modal-header"> 
     <h3 class="modal-title">Im a modal!</h3> 
    </div> 
    <div class="modal-body"> 
     <ul> 
      <li ng-repeat="item in items"> 
       <a ng-click="selected.item = item">{{ item }}</a> 
      </li> 
     </ul> 
     Selected: <b>{{ selected.item }}</b> 
    </div> 
    <div class="modal-footer"> 
     <button class="btn btn-primary" ng-click="ok()">OK</button> 
     <button class="btn btn-warning" ng-click="cancel()">Cancel</button> 
    </div> 
</script> 

Проблема в том, что, поскольку этот диалог используется в 3-х разных частях одной и той же страницы, у меня есть проблема с шаблоном. Когда я помещаю html-шаблон вне контроллера, в самом конце страницы html, он терпит неудачу и дает мне 404.

Однако я не хочу повторять один и тот же фрагмент HTML в трех местах в такой же страница. Может ли кто-нибудь сказать мне, есть ли другой способ вызвать шаблон, который находится вне контроллера?

Answer 1

Хороший способ повторного использования шаблона - поместить его в отдельный файл html и поместить его URL-адрес в templateUrl. Таким образом, $modal может получать его с сервера каждый раз, когда это необходимо.