Как вызвать всплывающее окно в главной html-странице извне директивы angularjs?

0

В главном html есть два всплывающих окна. один фрагмент кода для одного окна выглядит следующим образом:

<div id="new-asset-modal" > 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header> 
        <h4 class="modal-title>Type A Record Name</h4> 
       </div> 
       <div class="modal-body"> 
        <input ng-model="a" type="text" aria-describedby="basic-addon1" /> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" data-dismiss="modal">Cancel</button> 
        <button type="button" data-dismiss="modal" id="modal-save" ng-click="add()">Save</button> 
       </div> 
      </div> 
     </div> 
    </div> 

Конечно, есть еще один модальный под названием "Тип записи типа B",

В основном html я использовал такую директиву

<directivetest></directivetest>

В элементе управления код выглядит так:

  .directive("directivetest",function(){
                    return{
                    restrict:'EA',
                    replace: true,
                    templateUrl: "testpage.html",
                    controller:[ $scope,function($scope){
                    $scope.popaction=function(c){.....};
                     }]
    }
    );}

В testpage.html есть кнопка

<button ng-click="popaction(c);">Button1</button>   

Я хочу такую функцию: Когда нажата кнопка 1, если аргумент равен "a", тогда "основная мода" запускается/отображается на главной странице; если аргумент равен "b", тогда "Type B modal" является triggerd/показано.

Спасибо !!

Теги:
angularjs-directive

1 ответ

0

Одна идея заключалась бы в том, чтобы $broadcast сообщение из вашей директивы, которое содержит тип, который был нажат, а затем использовать $on в вашем основном контроллере для прослушивания сообщения и действовать соответственно, когда он получен.

В директивном контроллере:

$scope.popaction=function(type){
    $scope.$broadcast("BUTTON_CLICKED", {"type":type});
};

В основном контроллере:

$scope.$on("BUTTON_CLICKED", function(event, args) {
    if(args.type === 'a') {
        doModalA();
    }
});

Обновление Что касается запуска модального, я использовал ng-dialog и мне очень понравилось. Документация довольно хорошая, но в основном вы включаете файл js и ngDialog, затем делаете что-то вроде:

function doModalA() {
    ngDialog.open({ template: 'popupTmpl.html' });
}

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

Наконец, вам, вероятно, придется сделать шаблоны из ваших модалов, что легко. Просто включите что-то вроде этого в свой main.html, поместите в него свой модальный контент и назовите его, как хотите:

<script type="text/ng-template" id="/popupTmpl.html">
    Content of the template.
</script>
  • 0
    Спасибо за помощь. Что будет "doModalA ();" любить? Я не знаю, как вызвать этот модальный DOM. @csmithmaui
  • 0
    Смотрите мой обновленный ответ для одного варианта.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню