Frage Bootstrap-Warnmeldung wird als modal, eckig dargestellt


Bootstrap 3 bietet Bootstrap: Ereignisnachrichten: success, info, warning, danger.

Manchmal hat die Ansicht jedoch nicht genügend Platz, um die Ereignismeldung anzuzeigen.

Gibt es einen einfachen Weg, um ein Event zu umhüllen? modal in eckig?

Das ist ein Vorlage Ich fing an zu spielen


5
2017-08-03 12:58


Ursprung


Antworten:


Ich werde auf meine eigene Frage antworten.

Einfacher Weg

Der Ablauf ist ziemlich einfach und unkompliziert. Wir erfinden das Rad hier nicht neu.

Wir brauchen weder Header noch Footer:

Dialogvorlage HTML:

<div class="modal-body" style="padding:0px">
    <div class="alert alert-{{data.mode}}" style="margin-bottom:0px">
        <button type="button" class="close" data-ng-click="close()" >
            <span class="glyphicon glyphicon-remove-circle"></span>
        </button>
        <strong>{{data.boldTextTitle}}</strong> {{data.textAlert}}
    </div>
</div>

Wir brauchen es gar nicht zu benutzen ng-class:

class="alert-{{data.mode}}"

Wo könnte der Modus sein: success, info, warning, danger


Modaler Instanz-Controller:

var ModalInstanceCtrl = function ($scope, $modalInstance, data) {
  $scope.data = data;
  $scope.close = function(/*result*/){
    $modalInstance.close($scope.data);
  };
};

Und das ist modale Konfiguration und Inhalt:

 $scope.data = {
    boldTextTitle: "Done",
    textAlert : "Some content",
    mode : 'info'
  }  

var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: ModalInstanceCtrl,
      backdrop: true,
      keyboard: true,
      backdropClick: true,
      size: 'lg',
      resolve: {
        data: function () {
          return $scope.data;
        }
      }
    });

Demo Plunker 


enter image description here

Richtlinie Weg

Demo 2 Plunker

Wir können den obigen Code in die Direktive für eine bessere Wartung einfügen:

HTML

<button class="btn btn-success" ng-click="open()" >success
          <my-alert
          bold-text-title="Done"
          text-alert="Some content"
          mode="success"
          ></my-alert>
</button>

Richtlinie

.directive('myAlert', function($modal,$log) {
      return {
        restrict: 'E',
        scope: {
          mode: '@',
          boldTextTitle: '@',
          textAlert : '@'
        },
        link: function(scope, elm, attrs) {

       scope.data= {
                mode:scope.mode,
                boldTextTitle:scope.boldTextTitle,
                textAlert:scope.textAlert
              }

       var ModalInstanceCtrl = function ($scope, $modalInstance, data) {

           console.log(data);

           scope.data= {
              mode:scope.mode || 'info',
              boldTextTitle:scope.boldTextTitle || 'title',
              textAlert:scope.textAlert || 'text'
          }
        };

        elm.parent().bind("click", function(e){
           scope.open();
       });

     scope.open = function () {

        var modalInstance = $modal.open({
          templateUrl: 'myModalContent.html',
          controller: ModalInstanceCtrl,
          backdrop: true,
          keyboard: true,
          backdropClick: true,
          size: 'lg',
          resolve: {
            data: function () {
              return scope.data;
            }
          }
        });


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

Ich hoffe, es wird Zeit für jemanden sparen.


13
2017-08-03 12:58



Ich habe einen Service und Controller gemacht, die voneinander abhängen:

.service('AlertService', function($uibModal){
    /*
        headerText - presents text in header
        bodyText - presents text in body
        buttonText - presents text in button. On its click if method parameters is not passed, modal will be closed.
                    In situation that the method parameters is passed, on its click, method will be called. For situations
                    like that, there is parameter buttonText2 which will be used as cancel modal functionality.
        method - presents passed function which will be called on confirmation
        buttonText2 - presents text in button for cancel

     */
    var alert = function(headerText, bodyText, buttonText, method, buttonText2){

        method = method || function(){};
        buttonText2 = buttonText2 || '';

        $uibModal.open({
            animation: true,
            templateUrl: '/static/angular_templates/alert-modal.html',
            controller: 'AlertModalInstanceCtrl',
            size: 'md',
            resolve: {
                headerText: function () {
                  return headerText;
                },
                bodyText: function () {
                  return bodyText;
                },
                buttonText: function () {
                  return buttonText;
                },
                method: function () {
                    return method;
                },
                buttonText2: function () {
                    return buttonText2;
                }
            }
        });
    };

    return{
        alert: alert
    };

})
.controller('AlertModalInstanceCtrl', function ($scope, $uibModalInstance, headerText, bodyText, buttonText, method, buttonText2) {
    $scope.headerText = headerText;
    $scope.bodyText = bodyText;
    $scope.buttonText = buttonText;
    $scope.method = method;
    $scope.buttonText2 = buttonText2;

    $scope.ok = function () {
        $scope.method();
        $uibModalInstance.dismiss('cancel');
    };

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

und html-Datei:

<!--Modal used for alerts in AlertService-->

<div class="modal-header">
    <h3 class="modal-title">{[{ headerText }]}</h3>
</div>
<div class="modal-body">
    <p>{[{ bodyText }]}</p>
</div>
<div class="modal-footer">
    <button class="btn btn-default" ng-click="cancel()" ng-if="buttonText2">{[{ buttonText2 }]}</button>
    <button class="btn btn-primary" ng-click="ok()">{[{ buttonText }]}</button>
</div>

Je nachdem, für welchen Typ Sie es verwenden möchten, haben Sie jetzt einige Optionen: - Wenn Sie headerText, bodyText und buttonText übergeben, verhält es sich wie ein klassisches Alert-Modal

AlertService.alert('Some header', 'Some message', 'Text button');

- Wenn Sie headerText, bodyText, buttonText und method übergeben, verhält es sich wie ein klassisches Alert-Modal, aber mit der Funktion, die Sie übergeben und später im Controller behandeln können

AlertService.alert('Are you sure?', 'Are you sure you want to create this round', 'Ok', $scope.createRound);

$scope.createRound = function(){
//do something
}

-Und der Letzte. Wenn Sie alle Parameter übergeben, wird es wie die vorherige funktionieren, nur mit der Möglichkeit, Modal zu stornieren und zu schließen.

AlertService.alert('Are you sure?', 'Are you sure you want to create this round', 'Ok', $scope.createRound, 'Cancel');

$scope.createRound = function(){
//do something
}

Natürlich, wenn Sie dies verwenden möchten, müssen Sie angular ui Bootstrap injizieren. Ich habe viel Zeit verschwendet, um dies zu entwickeln, aber es lohnt sich. Es war nervig, jedes Mal einen neuen Controller, eine neue Vorlage und all die anderen Dinge zu erstellen.

Von der Steuerung können Sie sie dann einfach verwenden, injizieren Sie sie zuerst.


1
2017-08-15 12:46



Danke, dass du deine Frage beantwortet hast, es war hilfreich.

Hier ist eine Version als Service, den Sie von jedem Controller aus anschließen und abfeuern können, ohne dass eine Anweisung für eine Anweisung erforderlich ist.

Es verwendet das neueste eckige UI-Bootstrap-Paradigma für Modale.

Es hat einige Komfort-Methoden (Info, Fehler, Warnung, Erfolg).

Es löst ein Ereignis aus, wenn es mit den Daten als Event-Argument geschlossen wird, falls Sie das wissen müssen.

Genießen!

angular.module('modal.alert.service', [], function ($provide) {
    'use strict';
    $provide.factory('ModalAlertService', ['$rootScope', '$uibModal', 
                                           function ($rootScope, $uibModal) {

        var factory = {
            alert: function(mode, title, text) {

                var modalData = {
                    mode : mode,
                    title : title,
                    text : text
                };

                var modalInstance = $uibModal.open({
                    template: '<div class="modal-body" style="padding:0px">' +
                        '<div class="alert alert-{{data.mode}}" style="margin-bottom:0px">' +
                        '<button type="button" class="close" data-ng-click="close()" >' +
                        '<span class="glyphicon glyphicon-remove-circle"></span>' +
                        '</button><strong>{{data.title}}</strong>: &nbsp; {{data.text}}</div></div>',
                    controller : 'ModalAlertController',
                    backdrop : true,
                    keyboard : true,
                    backdropClick : true,
                    size : 'lg',
                    resolve : {
                        data : function() {
                            return modalData;
                        }
                    }
                });

                modalInstance.result.then(function(data) {
                    $rootScope.$broadcast('modal-alert-closed', { 'data' : data });
                });

            },
            info: function(title, text) {
                factory.alert('info', title, text);
            },
            error: function(title, text) {
                factory.alert('danger', title, text);
            },
            warn: function(title, text) {
                factory.alert('warning', title, text);
            },
            success: function(title, text) {
                factory.alert('success', title, text);
            }
        };

        return factory;

    }]);
}).controller('ModalAlertController', function ($scope, $uibModalInstance, data) {
    $scope.data = data;

    $scope.close = function() {
        $uibModalInstance.close($scope.data);
    };
});

0
2018-05-13 21:21