0

У меня есть приложение, которое использует угловое ust bootstrap modal (http://angular-ui.github.io/bootstrap/#/modal) для поиска из списка и выбора одной из строк.Создать поиск модальная директива от angularui modal

В обычном использовании модального моста с угловым ui мы должны создать два контроллера (например, ModalDemoCtrl для основного модального и ModalInstanceCtrl для модального окна).

Во втором контроллере, у нас есть два метода:

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

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

, что повторить в несколько месте (когда я создаю несколько поиска модальности).

Как создать директиву (или службу), которая содержит эти два контроллера и создать эти два метода внутри него.

+0

Вместо создания директивы или службы у вас может быть два общих контроллера для основного и модального экрана. Это имеет смысл. Вы можете настроить свой основной и модальный экран в соответствии с вашим требованием перед инициализацией. Таким образом, ваш код контроллера будет работать в вашей конфигурации. Это решит вашу проблему, и вам не нужно будет повторно вводить код повторно. – dhavalcengg

ответ

0

Ответ Петра Аверьянова был прав. Я создал директиву и в конце документации для модульной директивы Angular UI. Когда мы создаем модальное окно, некоторое свойство добавляет к $ scope. Одно из свойств $ close, что мы можем использовать его для закрытия модального.

.directive('closeModal', function() { 
     return { 
      restrict: 'E', 
      template: '<button ng-click="$close()">Cancel</button>' 
     }; 
    }) 
1

Вы ошибаетесь - есть один контроллер для модального окна. Второй - для главной страницы и вообще не связан с модалами. Поэтому, если у вас есть 10 кнопок на странице, чтобы открыть 10 разных модалов, тогда у вас будет 11 контроллеров.

Для моделей, которые просто отображают сообщение или запрашивают подтверждение действий, хорошо иметь сервис, поэтому вы можете написать Myservice.showModal («Вы уверены?», Функция callbackafterok() {...}).

Если и просто не люблю повторять $ modalInstance.close - сделать простую директиву для кнопок с нг-нажмите связывание, чтобы написать:

<button closeModalWithData="" >Ok</cancel> 

или просто <modalOk/> с шаблоном <button ng-click="ok()">Ok</button> ...

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