Как использовать угловую директиву для отображения диалога?

Question

Используя Angular, я пытаюсь создать директиву, которая будет размещена на кнопке, которая запустит диалог поиска. Существует несколько экземпляров кнопки поиска, но, очевидно, мне нужен только один экземпляр диалогового окна. Диалог должен быть построен из URL-адреса шаблона и иметь собственный контроллер, но когда пользователь выбирает элемент, директива будет использоваться для установки значения.

Любые идеи о том, как создать диалог с помощью собственного контроллера из директивы?

Вот что я пойти так далеко (в основном только директиву) ...

http://plnkr.co/edit/W9CHO7pfIo9d7KDe3wH6?p=preview

Вот HTML из приведенного выше plkr ...

<a href="" my-find="setPerson">Find</a> 

Вот код из вышеуказанного plkr ...

var app = angular.module('plunker', []); 

app.controller('MainCtrl', function($scope) { 
    var person = {}; 
    person.name = 'World'; 
    $scope.person = person; 

    $scope.setPerson = function(newPerson) { 
    person = newPerson; 
    $scope.person = person; 
    } 
}); 

app.directive('myFind', function() { 

    var $dlg; // holds the reference to the dialog. Only 1 per app. 

    return { 
     restrict: 'A', 
     link: function (scope, el, attrs) { 

      if (!$dlg) { 
       //todo: create the dialog from a template. 
       $dlg = true; 
      } 

      el.bind('click', function() { 

       //todo: use the dialog box to search. 

       // This is just test data to show what I'm trying to accomplish. 
       alert('Find Person'); 
       var foundPerson = {}; 
       foundPerson.name = 'Brian'; 
       scope.$apply(function() { 
        scope[attrs.myFind](foundPerson); 
       }); 

      }); 
     } 
    } 
}) 

Это насколько я добрался. Я не могу понять, как создать диалог с помощью шаблона внутри директивы, поэтому он возникает только один раз и затем назначает ему контроллер. Я думаю, что я могу назначить контроллер внутри шаблона, но сначала мне нужно выяснить, как загрузить шаблон и вызвать наш настраиваемый плагин jQuery для создания диалога (у нас есть собственный взгляд & для диалогов).

Итак, я верю в вопрос, как загрузить шаблон внутри директивы? Однако, если есть другой способ мышления об этой проблеме, я был бы заинтересован в этом.

Answer 1

Я покажу вам, как это сделать, используя bootstrap-ui. (вы можете легко его изменить, если это не соответствует вашим потребностям).

Описание Скелет шаблона. Вы можете обычно связаны с любыми свойствами и функциями, которые по размаху директивы:

<div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      ... // e.g. <div class="button" ng-click=cancel()></div> 
     </div> 
     <div class="modal-body"> 
      ... 
     </div> 
     <div class="modal-footer"> 
      ... 
     </div> 
    </div> 
</div> 

Вот как создать/объявить директиву в модуле:

.directive("searchDialog", function ($modal) { 

     return { 

      controller: SearchDialogCtrl, 

      scope : { 
       searchDialog: '=' // here you will set two-way data bind with a property from the parent scope 
      }, 

      link: function (scope, element, attrs) { 

       element.on("click", function (event) { // when button is clicked we show the dialog 
        scope.modalInstance = $modal.open({ 
         templateUrl: 'views/search.dialog.tpl.html', 
         scope: scope // this will pass the isoleted scope of search-dialog to the angular-ui modal 
        }); 
        scope.$apply(); 
       }); 
      } 
     } 
    }); 

Затем контроллер может выглядеть примерно так:

function SearchDialogCtrl(dep1, dep2) { 

    $scope.cancel = function() { 
     $scope.modalInstance.close(); // the same instance that was created in element.on('click',...) 
    } 

    // you can call it from the template: search.dialog.tpl.html 
    $scope.someFunction = function() { ... } 

    // it can bind to it in the search.dialog.tpl.html 
    $scope.someProperty; 

    ... 

    // this will be two-way bound with some property from the parent field (look below) 
    // if you want to perform some action on it just use $scope.$watch 
    $scope.searchDialog; 
} 

Тогда ваша наценка вы можете просто использовать его так:

<div class="buttonClass" search-dialog="myFieldFromScope">search</div> 

Answer 2

Я рекомендую этот плагин:

https://github.com/trees4/ng-modal

Demo здесь: https://trees4.github.io/ngModal/demo.html

Создать диалог декларативно; и он работает с существующими контроллерами. Содержимое диалога можно стилизовать, как вам нравится.