Как получить HTML-контент в модальном теле

Question

Как получить HTML-контент в модальном теле

0

У меня возникли проблемы с передачей html (формы) для body modal.

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

modal.service.js

(function() {
var app = angular.module('app');

function ModalService($rootScope, $q, $modal) {
  var defaultOptions = getModalDefaultOptions();
  var service = {
    showModal: showModal
  };

  return service;

  function getModalDefaultOptions() {
    return {
      templateUrl: '/app/shared/modals/templates/modal.default.html',
      closeButtonText: 'Fechar',
      actionButtonText: 'OK',
      headerTitle: 'Header default',
      bodyContent: 'Conteúdo body modal',
      showActionButton: true,
      showCloseButton: true,
      headerClass: ''
    };
  }

  function showModal(customModalOptions) {
    var deferred = $q.defer();

    //Create temp objects to work with since we're in a singleton service
    var tempModalOptions = {};

    //Map modal.html $scope custom properties to defaults defined in service
    angular.extend(tempModalOptions, defaultOptions, customModalOptions);

    var scope = $rootScope.$new();
    scope.modalOptions = tempModalOptions;

    scope.modalOptions.ok = function(result) {
      deferred.resolve();
      modal.hide();
    };

    scope.modalOptions.close = function(result) {
      deferred.reject();
      modal.hide();
    };

    var modal = $modal({
      scope: scope,
      templateUrl: scope.modalOptions.templateUrl,
      title: scope.modalOptions.headerTitle,
      content: scope.modalOptions.bodyContent,
      show: true
    });

    console.log(tempModalOptions);
    return deferred.promise;
  }

}


app.factory('ModalService', ModalService);

})();

modal.default.html

<div class="modal" role="dialog" tabindex="-1" data-type="Modal Default">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header" data-ng-class="modalOptions.headerClass" ng-show="title">
        <button class="close" ng-click="modalOptions.close();" type="button">&times;</button>
        <h4 class="modal-title" ng-bind="modalOptions.headerTitle"></h4>
      </div>
      <div class="modal-body" ng-bind="modalOptions.contentTemplate">{{modalOptions.contentTemplate}}</div>
      <div class="modal-footer">
        <button class="btn btn-default" data-ng-click="modalOptions.close();" data-ng-show="modalOptions.showCloseButton" type="button">
          {{modalOptions.closeButtonText}}</button>
        <button class="btn btn-primary" data-ng-click="modalOptions.ok();" data-ng-show="modalOptions.showActionButton">
          {{modalOptions.actionButtonText}}</button>
      </div>
    </div>
  </div>
</div>

entidades.controller.js

(function() {
  'use strict';
  var app = angular.module('app');

  app.controller('EntidadesController', EntidadesController);

  function EntidadesController(EntidadeService, ModalService) {
    var vm = this;

    vm.entidades = JSON.parse(EntidadeService.getAll());

    vm.openEditEntidades = function() {
      ModalService.showModal({
          headerClass: 'danger',
          contentTemplate: '/app/modulos/entidades/views/edit-entidades.html'
        })
        .then(function() {
          alert('Alert Modal 2');
        });
    };

    // console.log('Entidades onDemand');
  }

})();

Представление, которое называет модальным

<section ng-controller="EntidadesEditCtrl as ctrl">

  <div class="modal-header">
    <h3 class="modal-title">Editando entidade</h3>
  </div>
  <div class="row">
    <div class="modal-body">

      <form novalidate class="form-inline">
        <div class="col-md-6">
          <div class="form-group">
            <label class="sr-only" for="fm_name">Email address</label>
            <input class="form-control" id="fm_name" ng-model="vm.entidade.name" type="text">
          </div>
          <div class="form-group">
            <label class="sr-only" for="fm_email">Email</label>
            <input class="form-control" id="fm_email" ng-model="vm.entidade.email" type="email">
          </div>
          <div class="form-group">
            <label class="sr-only" for="fm_sexo">Sexo</label>
            <input class="form-control" id="fm_sexo" ng-model="vm.entidade.gender" type="text">
          </div>
          <div class="form-group">
            <label class="sr-only" for="fm_companhia">Companhia</label>
            <input class="form-control" id="fm_companhia" ng-model="vm.entidade.company" type="text">
          </div>
        </div>
        <div class="col-md-6">
          <div class="form-group">
            <label class="sr-only" for="fm_id">User ID</label>
            <input class="form-control" id="fm_id" ng-model="vm.entidade._id" type="text">
          </div>
          <div class="form-group">
            <label class="sr-only" for="fm_phone">Telefone</label>
            <input class="form-control" id="fm_phone" ng-model="vm.entidade.phone" type="tel">
          </div>
          <div class="form-group">
            <label class="sr-only" for="fm_endereco">Endereço</label>
            <input class="form-control" id="fm_endereco" ng-model="vm.entidade.address" type="text">
          </div>
          <div class="checkbox">
            <label>
              <input type="checkbox" ng-model="vm.entidade.isActive">{{vm.entidade.isActive}}
            </label>
          </div>
        </div>
      </form>

    </div>
  </div>
  <br>
  <div class="modal-footer">
    <button class="btn btn-primary" ng-click="ctrl.update(vm.entidade); vm.ok()" type="button">OK</button>
    <button class="btn btn-warning" ng-click="vm.cancel()" type="button">Cancel</button>
  </div>
</section>

и контент, который должен быть вставлен в тело-модальный

<div class="row" ng-controller="EntidadesController as ectrl">
  <div class="row text-center">
    <h1>Gerenciar entidades</h1>
  </div>
  <hr>
  <div class="row col-md-10 col-md-offset-1">
    <table class="table table-striped" st-table="rowCollection">

      <thead>
        <div class="panel ">
          <div class="panel-heading">
            <button class="btn btn-default pull-right" ng-click="open()">Add</button>
            <div class="clearfix"></div>
          </div>
        </div>
        <tr>
          <th>#</th>
          <th>Nome</th>
          <th>Compania</th>
          <th>Telefone</th>
          <th>email</th>
          <th>ação</th>
        </tr>
      </thead>

      <tbody>
        <tr ng-repeat="entidade in ectrl.entidades">
          <td>{{entidade._id}}</td>
          <td>{{entidade.name}}</td>
          <td>{{entidade.company}}</td>
          <td>{{entidade.phone}}</td>
          <td>{{entidade.email}}</td>
          <td>
            <button class="btn btn-default" ng-click="ectrl.openEditEntidades(entidade)" type="button">
              Editar
            </button>
          </td>
        </tr>
      </tbody>

      <tfoot>
        <tr>
          <td class="text-center" colspan="5">
            <div st-displayed-pages="7" st-items-by-page="itemsByPage" st-pagination=""></div>
          </td>
        </tr>
      </tfoot>

    </table>
  </div>
</div>

Спасибо за время.

GregoryDerner 07 дек. 2015, в 12:18

Источник

Теги:

angularjs

angular-strap

1 ответ

Ещё вопросы

Pjetr · Accepted Answer · 2015-12-07T09-09-00.000Z

Вы должны использовать ng-include для вставки другого шаблона.

<div class="modal" role="dialog" tabindex="-1" data-type="Modal Default">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header" data-ng-class="modalOptions.headerClass" ng-show="title">
        <button class="close" ng-click="modalOptions.close();" type="button">&times;</button>
        <h4 class="modal-title" ng-bind="modalOptions.headerTitle"></h4>
      </div>
      <div class="modal-body" ng-include="modalOptions.contentTemplate"></div>
      <div class="modal-footer">
        <button class="btn btn-default" data-ng-click="modalOptions.close();" data-ng-show="modalOptions.showCloseButton" type="button">
          {{modalOptions.closeButtonText}}</button>
        <button class="btn btn-primary" data-ng-click="modalOptions.ok();" data-ng-show="modalOptions.showActionButton">
          {{modalOptions.actionButtonText}}</button>
      </div>
    </div>
  </div>
</div>

Боже мой. Теперь я чувствую себя дураком. Я даже не подумал. Огромное спасибо.
не беспокойся, чувак, пометить это как правильный ответ? :)