Вызов модального окна в пользовательском интерфейсе пользовательского интерфейса AngularJS с использованием JavaScript

Ответ 1

ОК, так что прежде всего http://angular-ui.github.io/bootstrap/ имеет директиву <modal> и службу $dialog, и оба из них могут быть использованы для открытия модальных окон.

Разница заключается в том, что с директивой <modal> в модуле встроен шаблон хостинга (тот, который запускает открытие модального окна). Служба $dialog намного более гибкая и позволяет загружать модальный контент из отдельного файла, а также запускать модальные окна из любого места в коде AngularJS (это контроллер, служба или другая директива).

Не уверен, что вы подразумеваете под "использованием кода JavaScript", но при условии, что вы имеете в виду любое место в коде AngularJS, сервис $dialog, вероятно, является способом выхода.

Он очень прост в использовании и в его простейшей форме вы можете просто написать:

$dialog.dialog({}).open('modalContent.html');  

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

function DialogDemoCtrl($scope, $timeout, $dialog){
  $timeout(function(){
    $dialog.dialog({}).open('modalContent.html');  
  }, 3000);  
}

Это можно увидеть в действии в этом плунге: http://plnkr.co/edit/u9HHaRlHnko492WDtmRU?p=preview

Наконец, вот полная справочная документация к сервису $dialog, описанному здесь: https://github.com/angular-ui/bootstrap/blob/master/src/dialog/README.md

Ответ 2

Чтобы сделать angular ui $модальную работу с бутстрапом 3, вам нужно перезаписать стили

.modal {
    display: block;
}
.modal-body:before,
.modal-body:after {
    display: table;
    content: " ";
}
.modal-header:before,
.modal-header:after {
    display: table;
    content: " ";
}

(Последние необходимы, если вы используете пользовательские директивы) и инкапсулируйте html с помощью

<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      <h4 class="modal-title">Modal title</h4>
    </div>
    <div class="modal-body">
      ...
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      <button type="button" class="btn btn-primary">Save changes</button>
    </div>
  </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

Ответ 3

Открыть модальные окна с передачей данных в диалоговом окне

Если кто-то заинтересован в передаче данных в диалог:

app.controller('ModalCtrl', function($scope,  $modal) {

      $scope.name = 'theNameHasBeenPassed';

      $scope.showModal = function() {

        $scope.opts = {
        backdrop: true,
        backdropClick: true,
        dialogFade: false,
        keyboard: true,
        templateUrl : 'modalContent.html',
        controller : ModalInstanceCtrl,
        resolve: {} // empty storage
          };


        $scope.opts.resolve.item = function() {
            return angular.copy(
                                {name: $scope.name}
                          ); // pass name to resolve storage
        }

          var modalInstance = $modal.open($scope.opts);

          modalInstance.result.then(function(){
            //on ok button press 
          },function(){
            //on cancel button press
            console.log("Modal Closed");
          });
      };                   
})

var ModalInstanceCtrl = function($scope, $modalInstance, $modal, item) {

     $scope.item = item;

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

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

Демо Plunker

Ответ 4

Сайт AngularJS Bootstrap не обновлен последней документацией. Около 3 месяцев назад pkozlowski-opensource создал изменение для выделения $modal из $dialog commit ниже:

https://github.com/angular-ui/bootstrap/commit/d7a48523e437b0a94615350a59be1588dbdd86bd

В этом коммите он добавил новую документацию для $modal, которую можно найти ниже:

https://github.com/angular-ui/bootstrap/blob/d7a48523e437b0a94615350a59be1588dbdd86bd/src/modal/docs/readme.md.

Надеюсь, это поможет!

Ответ 5

Быстрый и грязный путь!

Это нехорошо, но для меня это кажется самым простым.

Добавить тег привязки, который содержит модальную цель данных и переключение данных, с идентификатором, связанным с ним. (Может быть добавлено в основном в html-представлении)

<a href="" data-toggle="modal" data-target="#myModal" id="myModalShower"></a>

Теперь

Внутри контроллера angular, где вы хотите вызвать модальный, просто используйте

angular.element('#myModalShower').trigger('click');

Это будет имитировать щелчок на кнопке на основе кода angular, и модальность появится.

Ответ 6

Разная версия, аналогичная версии, предложенной Максимом Шустин

Мне понравился ответ, но часть, которая беспокоила меня, заключалась в использовании <script id="..."> в качестве контейнера для модального шаблона.

Я хотел разместить модальный шаблон в скрытом <div> и связать внутренний html с переменной области, называемой modal_html_template в основном потому, что я думаю, что более корректно (и более удобно обрабатывать в WebStorm/PyCharm) разместить шаблон html внутри <div> вместо <script id="...">

эта переменная будет использоваться при вызове $modal({... 'template': $scope.modal_html_template, ...})

чтобы связать внутренний html, я создал inner-html-bind, который является простой директивой

ознакомьтесь с примером plunker

<div ng-controller="ModalDemoCtrl">

    <div inner-html-bind inner-html="modal_html_template" class="hidden">
        <div class="modal-header">
            <h3>I'm a modal!</h3>
        </div>
        <div class="modal-body">
            <ul>
                <li ng-repeat="item in items">
                    <a ng-click="selected.item = item">{{ item }}</a>
                </li>
            </ul>
            Selected: <b>{{ selected.item }}</b>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" ng-click="ok()">OK</button>
            <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
        </div>
    </div>

    <button class="btn" ng-click="open()">Open me!</button>
    <div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>

inner-html-bind директива:

app.directive('innerHtmlBind', function() {
  return {
    restrict: 'A',
    scope: {
      inner_html: '=innerHtml'
    },
    link: function(scope, element, attrs) {
      scope.inner_html = element.html();
    }
  }
});