Угловая UI Bootstrap Модальные не работает с нг-включают

Question

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

Когда "Open Модальные 1" нажата, брошено следующее сообщение об ошибке:

Error: Dialog.open expected template or templateUrl, neither found. Use options or open method to specify them.

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

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

Любые идеи?

Answer 1

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

https://github.com/angular-ui/bootstrap/commit/ec796ec2299d03ddfb821e97047c0329f11ab962#src/modal/modal.js

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

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

Изменено живой пример: http://plnkr.co/edit/niYVIL9l8L8niBz56S4z?p=preview

Answer 2

Я не знаю, какую версию Angular-интерфейс, который был, но документация для модальных окон остается запутанной. Хотя вы действительно можете использовать директиву ngInclude как часть показа модального окна, это необязательно, как показано ниже. В приведенном ниже случае модальные html и скрипты находятся в отдельных файлах, а modal.open() используется для их ссылки и отображения. По какой-то причине, я только был в состоянии осуществить обновляемую модель, когда он был принят в качестве объекта имущества $ сферы .. (см «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() { 
       ... 
      } 
     ); 

     }); 
    }); 

Если вы хотите для использования включить, однако, есть две gotchas.

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

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