AngularJS модальное окно данных / поток объектов

Я создал небольшую демонстрацию для использования, когда мне нужно открыть модальное окно в Angular. Использование директивы в качестве шаблона модального окна.

В чем я не уверен, так это в том, как я передаю данные / функции в модальное окно.

Контроллер открытия:

    $scope.openModal = function($event){
       $scope.items = [1,2,3,4,5];
       $scope.modalInstance =  $modal.open({
           template: '<modalwindow></modalwindow>',
           scope:$scope,
           test:'akex'
    });

    $scope.modalInstance.result.then(function (selectedItem) {
        console.info(selectedItem);
    }, function () {
        console.info('Modal dismissed at: ' + new Date());
    });

и модальная директива:

 angular.module('angModalApp')
 .directive('modalwindow', function () {
   return {
      templateUrl: 'scripts/directives/modalwindow.tmpl.html',
      restrict: 'E',
      link: function postLink(scope, element, attrs) {
          scope.ok = function () {
              scope.modalInstance.close(["a","b","c"]);
          };

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

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

Спасибо за уделенное время.

Исходный код проекта можно найти по адресу: https://github.com/trostik/angular-modal-window-demo


javascript angularjs angular-ui-bootstrap
person Community    schedule 24.10.2013    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Я бы порекомендовал вам использовать Angular-UI / bootstrap: http://angular-ui.github.io/bootstrap/

он прост в реализации и стабилен.

person Shavit Cohen    schedule 27.10.2013
comment
Привет, если вы посмотрите на индекс, я на самом деле уже использую angular-ui-bootstrap для этого. Проблема в том, что я хочу сделать модальное окно директивой. А затем передайте ему модальный экземпляр. Но это не работает, поэтому я передаю область видимости с modalInstance в качестве параметра. Это проблемная часть imho. - person ; 27.10.2013
comment
Angular-ui уже имеет директиву для вашего модального окна, все, что вам нужно сделать, это написать контроллер для вашего представления, а не директиву. проверьте это: plnkr.co/edit/jpJX4WvHw0SSYm3pAAzq?p=preview - person Shavit Cohen; 27.10.2013
comment
Просто подтолкнул новое решение после просмотра файла modal.js (angular-ui-bootstrap), похоже, вы правы. Единственное, что я сделал иначе, - это использование module.controller ('ctrname' для создания контроллера, а не var ctrname = function. Чтобы добавить его в модуль, а не в приложение целиком. - person ; 27.10.2013

arrow_upward
0
arrow_downward

Лучший способ передать данные в директивы такого типа обычно - через изолированную область.

Взято из http://docs.angularjs.org/guide/directive:

<!doctype html>
<html ng-app="docsIsolateScopeDirective">
  <head>
    <script src="http://code.angularjs.org/1.2.0-rc.3/angular.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <div ng-controller="Ctrl">
      <my-customer customer="naomi"></my-customer>
      <hr>
      <my-customer customer="igor"></my-customer>
    </div>
  </body>
</html>

Обратите внимание, как они используют настраиваемые атрибуты в директиве myCustomer для передачи данных из области действия контроллера Ctrl.

Чтобы получить доступ к этим данным, определение директивы должно использовать параметр scope:

  .directive('myCustomer', function() {
  return {
    restrict: 'E',
    scope: {
      customer: '=customer'
    },
    templateUrl: 'my-customer.html'
  };
});

Вы можете увидеть, как в области действия указан клиент. Значение- = customer указывает Angular создать двустороннюю привязку данных между данными, указанными как атрибут, со свойством в изолированной области действия директивы, определенной как customer. Вы также можете просто указать = для более короткого пути к этому, который в этом случае создаст ссылку в области действия директивы как то же имя атрибута. Если вам нужно передать данные, которые не должны изменяться внутри директивы, вы должны использовать символ @ вместо =, а если вам нужно передать функции, вы следует использовать символ &.

person Naor Biton    schedule 27.10.2013