Angular UI Bootstrap Modal не работает с ng-include

Живой пример: http://plnkr.co/edit/wWS3UFB3IZ0cAI4u2x04?p=preview

При нажатии "Открыть модал 1" выдается следующая ошибка:

Ошибка: ожидаемый шаблон Dialog.open или templateUrl не найдены. Используйте параметры или открытый метод, чтобы указать их.

Тем не менее, Modal 2, который не использует ng-include, работает отлично.

Кроме того, если ui-bootstrap-tpls-0.1.0.js включен вместо ui-bootstrap-tpls-0.2.0.js, все отлично работает.

Есть идеи?

Источник

2 ответа

Решение

Я считаю, что эта проблема является результатом изменения модальной директивы, чтобы быть терминальной. Это означает, что другие директивы (например, ng-include) не будут обрабатываться вместе с модальными. Вот коммит, который сделал это изменение:

https://github.com/angular-ui/bootstrap/commit/ec796ec2299d03ddfb821e97047c0329f11ab962

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

<div modal="opened1">
    <ng-include src="'modal1.html'"></ng-include>
</div>

Обновленный пример в реальном времени: http://plnkr.co/edit/KBBOn2T8cbeLfB0Su9jp

Источник

Я не знаю, какая версия Angular-ui была, но документация для модальных окон остается запутанной. Хотя вы действительно можете использовать директиву ngInclude как часть отображения модального окна, в этом нет необходимости, как показано ниже. В приведенном ниже случае модальный html и скрипт находятся в отдельных файлах, а для ссылки и отображения их используется modal.open(). По какой-то причине я смог применить обновляемую модель только тогда, когда она была передана как свойство объекта $scope..(см. "Vm." В коде)

ModalView.html фрагмент

<!-- html elements reference the ModalViewCtrl decorated $scope -->
<input ng-model='vm.email' type='email' placeholder='Email address' autofocus />
<input ng-model="vm.password" type="password" class="form-control" placeholder="Password" />
<label class="checkbox">
    <input ng-model="vm.rememberMe" type="checkbox" />
    Remember me
</label>

Фрагмент ModalViewCtrl.js

 angular.module('app')
   .controller('ModalViewCtrl', function($scope, $modal, parms) {

      /* decorate the $scope and/or preset the $scope.vm object
         as needed with parms.parm1, parms.parm2, ....
      */

      $scope.ok = function () {
         $modalInstance.close($scope.vm);
      };

      $scope.cancel = function () {
         $modalInstance.dismiss();
      };     

   });

Фрагмент SourcePageCtrl.js

 angular.module('app')
   .controller('SourcePageCtrl', function($scope, $modal, ...) {

      $scope.open = function() {
         var modalInstance = $modal.open({
            templateUrl: 'path_literal_to_ModalView.html'
            ,controller: 'ModalViewCtrl'
            ,resolve : {
                parms : function() { return {
                   parms1 : value1
                  ,parm2 : value2
                  ,...
                }}
            });

         modalInstance.result.then(
            function (vm) { 
                $scope.result = vm;
            } , function () {
                ... 
            }
         );

      });
   });

Однако если вы хотите использовать include, есть две ошибки.

  1. 'TemplateUrl' должен ссылаться на идентификатор тега, содержащего модальные элементы, например идентификатор самого ngInclude, а не URL-адрес файла шаблона.

  2. Поскольку angular оценивает значения атрибута, если для атрибута src пути указан литерал, то элемент должен быть заключен в кавычки внутри уже заключенной в кавычки строки:

Источник
Другие вопросы по тегам