angularjs benutzerdefinierte bestätigen-box

So, ich bin versucht zu implementieren eine benutzerdefinierte bestätigen-box mit Winkel. Im Idealfall würde ich einfach gern ein Attribut hinzuzufügen um die Funktionalität zu aktivieren. Beispiel:

<button type="button" ng-click="delete(foo)">Delete</button>  ->  <button type="button" ng-click="delete(foo)" ng-confirm="Are you sure you want to delete this foo?">Delete</button>

(foo ist in einem ng-repeat... foo in fooList..)

So, alle Probleme, die ich habe drehen sich um das binden des click-Ereignisses, das normalerweise geschehen würde, um eine andere Taste. Ich habe eine separate Richtlinie "confirmBox" zu schaffen, der meine modal (nicht mit bootstrap) und behandeln alle zeigen/ausblenden/etc.

Was ich momentan verwende, muss ich mein alter ng-click-Funktionen, die ich wirklich wollen, um Weg von:

Aktuelle Implementierung:

<button ... ng-click="confirm('Are you sure you want to delete this foo?, 'delete', foo)">Delete</button>

var confirmModule = angular.module('confirm', []);

confirmModule.run(function($rootScope) {
    $rootScope.confirm = function(text, func, obj) {
        $rootScope.$broadcast('confirm', func, obj, text);
    };
});

confirmModule.directive('confirmBox', function($parse) {

    return {
        restrict: 'A',
        template: myModalTemplate,
        link: function(scope, element, attrs){
            element.hide();
            var noBtn = element.find("[name='no']");
            noBtn.bind("click", function() {
                element.hide();
            });
            scope.$on("confirm", function(event, func, obj, text) {
                var yesBtn = element.find("[name='yes']");
                element.show();
                yesBtn.unbind("click").bind("click", function() {
                    scope[func](obj);
                });
            });
        }
    }
});

Jemand irgendwelche Ideen? Ich begann, indem die Richtlinie für die Schaltfläche und dann unverbindlich das click-Ereignis so ng-click nicht ausgelöst. Dann bin ich Links mit der Zeichenfolge 'delete(foo)' von der ng-click Attribut, das ich ausführen kann, mit $parse(attrs.ngClick)(scope), aber ich weiß nicht, wie zu binden, dass Sie in separaten Richtlinien-button klicken.

Edit: Hier ist ein Turnschuh mit meinem aktuellen Versuch der Umsetzung. Das problem ist die variable, die übergeben wird in der Funktion ist immer undefiniert.

http://jsfiddle.net/UCtbj/2/

Edit2: Aktualisierung, Umsetzung, jedoch glaube ich nicht so besonders, wie es links der beiden Richtlinien zusammen, durch welche die anderen Richtlinien-Elemente.

http://jsfiddle.net/UCtbj/3/

InformationsquelleAutor James Kleeh | 2013-06-17

angularjs angularjs-directive

6

Scheint es mir, dass du versuchst, Dinge zu tun, die jQuery-Weg aus der Richtlinie. Jedoch, was Sie wollen, ist so einfach wie das ziehen in den UI-Bootstrap-Richtlinie für die Bestätigung von Aktionen. http://plnkr.co/edit/JhfAF1?p=preview
- Das problem mit diesem ist, dass es erfordert, dass Sie setzen das dialog-code in jede Funktion, die Sie wollen, es zu zeigen. Es hat wirklich nichts mit der business-Logik der Anwendung also imo, es sollte nicht da sein.
- Es scheint, dass die Winkel-Benutzeroberfläche wurde umgestaltet und den $dialog-service entfernt wurde und die Sie verwenden können, messagebox Funktionalität wie in der plunker mehr. stackoverflow.com/questions/19468127/...
- Ich konnte umgestalten, dass die $modal service in meinem Richtlinie bestätigen. Ich weiß noch nicht verwenden möchten, $modal in meinem controller - Ihrer Ansicht die Logik, damit dort nicht hin gehört.
- gibt es eine Möglichkeit, NUR die UI-BS Teil des Codes und nicht unter Last ist mit dem rest?
InformationsquelleAutor Sharondio

Ersten einfachen service für modale Fenster:

app.service('ConfirmService', function($modal) {
  var service = {};
  service.open = function (text, onOk) {
    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: 'ModalConfirmCtrl',
      resolve: {
        text: function () {
          return text;
        }
      }
    });

    modalInstance.result.then(function (selectedItem) {
      onOk();
    }, function () {
    });
  };

  return service;
})

app.controller('ModalConfirmCtrl', function ($scope, $modalInstance, text) {

  $scope.text = text;

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

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

Dann einfache Richtlinie, in dem es verwendet:

app.directive('confirm', function(ConfirmService) {
    return {
        restrict: 'A',
        scope: {
            eventHandler: '&ngClick'
        },
        link: function(scope, element, attrs){
          element.unbind("click");
          element.bind("click", function(e) {
            ConfirmService.open(attrs.confirm, scope.eventHandler);
          });
        }
    }
});

Und hier u go:

<button ng-click="test(12)" confirm='Are you sure?'>Button</button>

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

Dieser sieht sauberer aus als meins. Dies tut man noch brauchen && bestätigen-test innerhalb von ng-click? Oder ist es die gebundenen irgendwie?
gibt es eine Möglichkeit, nicht mit dem ui-bootstrap?

InformationsquelleAutor Petr Averyanov

Erlauben eine Taste markiert werden, wie

<button type="button" ng-click="deleteItem(drink)" ng-confirm="Are you sure you want to delete '{{drink.name}}'">Delete</button>

Schreiben Sie eine Richtlinie, die

Fängt das click-Ereignis vor ngClick's click-handler ausgeführt werden kann
Öffnet sich ein dialog (mit $modal und nicht entfernt $dialog)
Auf close im dialog (die behandelt wird als ein Erfolg) führen Sie die Funktion angegeben, die von der ngClick Attribut auf das element.

Stützen den code auf die Vorherige Antwort, können Sie dies wie folgt:

app.directive('ngConfirm', function($modal, $parse) {
  return {
    //So the link function is run before ngClick's, which has priority 0
    priority: -1,

    link: function(scope, element, attrs) {
      element.on('click', function(e) {
        //Don't run ngClick's handler
        e.stopImmediatePropagation();

        $modal.open({
          templateUrl: 'ng-confirm-template',
          controller: 'ngConfirmController',
          resolve: {
            message: function() {
              return attrs.ngConfirm;
            }
          }
        }).result.then(function() {
          //Pass original click as '$event', just like ngClick
          $parse(attrs.ngClick)(scope, {$event: e});
        });
      });
    }
  };
});

welche einen einfachen controller:

app.controller('ngConfirmController', function($scope, $modalInstance, message) {
  $scope.message = message;

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

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

und eine Vorlage für den dialog:

<script type="text/ng-template" id="ng-confirm-template">
  <div class="modal-body">
    <p>{{message}}</p>
  </div>
  <div class="modal-footer">
    <button class="btn btn-link pull-left" ng-click="no()">No</button>
    <button class="btn btn-primary pull-right" ng-click="yes()">Yes</button>
  </div>
</script>

Können Sie sehen, dieses läuft bei http://plnkr.co/edit/Gm9lFsGb099w6kCMQoVY?p=preview

Edit: geändert plunker link zum Beispiel ohne scrollbar erscheinen/verschwinden auf dem display der dialog

Diese Umsetzung hat die gleiche Idee wie meine, allerdings sehe ich einige Probleme mit es - siehe meine Antwort.
Was sind die Probleme?

InformationsquelleAutor Michal Charemza

Hier ist eine schöne Richtlinie für, die.Das ist ngBootbox. Überprüfen Sie es heraus.

<button class="btn btn-lg btn-primary"
        ng-bootbox-title="A cool title!"
        ng-bootbox-custom-dialog="Some custom text"
        ng-bootbox-buttons="customDialogButtons"
        ng-bootbox-class-name="some-class">
    Custom dialog
</button>

<script>
    $scope.customDialogButtons = {
        warning: {
            label: "Warning!",
            className: "btn-warning",
            callback: function() { $scope.addAction('Warning', false); }
        },
        success: {
            label: "Success!",
            className: "btn-success",
            callback: function() { $scope.addAction('Success!', true) }
        },
        danger: {
            label: "Danger!",
            className: "btn-danger",
            callback: function() { $scope.addAction('Danger!', false) }
        },
        main: {
            label: "Click ME!",
            className: "btn-primary",
            callback: function() { $scope.addAction('Main...!', true) }
        }
    };
    </script>

Demo

ngBootbox

InformationsquelleAutor Sampath

0

Erstellte ich ein repo für diese Funktionalität. Es umschließt die ui-bootstrap-modal zu produzieren, die ein Dialogfeld zur Bestätigung. Es ist anpassbar und leicht integrierbar in jede Anwendung.

Hier ist der link zum GitHub: https://github.com/Schlogen/angular-confirm

Beispiel:

Als Richtlinie:
```
 <button type="button" ng-click="delete()" confirm-if="checked" confirm="Are you sure, {{name}}?">Delete</button>
```
As a service:
```
$confirm({text: 'Are you sure you want to delete?'})
  .then(function() {
    $scope.deletedConfirm = 'Deleted';
  });
```
- Das ist ziemlich nah, aber irgendwie springt, weil Sie verändert den Blättern zu tun, anstatt ein overlay.
InformationsquelleAutor James Kleeh

Ok, hier ist die, die ich landete mit

1) Erstellen Sie einen Dienst für den dialog

app.service('dialogModal', [
    '$modal', function($modal) {
    return function(message, title, okButton, cancelButton) {

      okButton = okButton === false ? false : (okButton || 'Yes');
      cancelButton = cancelButton === false ? false : (cancelButton || 'No');

      var modalInstance = $modal.open({        
        templateUrl: '/templates/deletePrompt.html',
        controller: ModalInstanceCtrl,
        resolve: {
          settings: function() {
            return {
              modalTitle: title,
              modalBody: message,
              okButton: okButton,
              cancelButton: cancelButton
            };
          }
        }
      });
      //return the modal instance
      return modalInstance;
    }
  }
]);

2) der controller erstellt und übergeben Sie die Modell-Instanz in der es

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

  angular.extend($scope, settings);

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

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

3) link in den header zu nehmen, die auf Standard-styling

<link data-require="[email protected]" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />

4) überschrieb das styling in meine eigene css -

5) Hier ist mein Löschvorgang Vorlage

<div id="overlayClearMainDiv" class="dialog-modal">
  <div id="overlayClearText">
    <span>{{modalBody}}</span>
  </div>
  <div id="overlayClearButton">
    <button id="overlayClearYesButton" class="confirmButton" type="button" ng-click="ok()" ng-show="okButton">{{okButton}}</button> 
    <button class="confirmButton-white" ng-click="cancel()" ng-show="cancelButton">{{cancelButton}}</button> 
  </div>
</div>

InformationsquelleAutor Demodave

Hier kurz für Sie - http://plnkr.co/edit/YklthDZcknmvMjU5A6pe?p=preview

Also im Grunde, wenn Sie daran interessiert sind, in zeigt ein modales Dialogfeld, sobald ein Benutzer klickt auf lassen Sie uns sagen, ein Knopf, es gibt keine Notwendigkeit, um es schwierig zu machen.
Alles, was Sie brauchen, ist eine einfache Richtlinie, die Kapseln $modal service gefunden im ui-bootstrap.

In meinem einfachen Beispiel habe ich mich nur übergeben Sie eine Zeichenfolge, die eine Nachricht und dann die Definition eines on-confirm Attribut, dass meine Richtlinie aufruft, sobald der Benutzer bestätigt. Aufruf der Funktion selbst nutzt die awesomeness $parse zu beheben, den Ausdruck und wenn der Fall geklärt ist, rufen Sie es mit dem Rahmen.

Schön und klar und hier ist, wie es aussieht.

Ansicht

<body ng-controller="AppController">

    <input type="button" value="Delete" 
           confirm="'Are you sure you want to delete me?'" on-confirm="delete()" />



    <script type="text/ng-template" id="modal.html">
        <div class="modal-header">
            <h3 class="modal-title">Confirm</h3>
        </div>
        <div class="modal-body">
            <p>The world won't be a better place if you delete me.</p>
        </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>
    </script>

 </body>

Controller /Richtlinie

angular
    .module('App', ['ui.bootstrap'])
    .controller('AppController', ['$scope', function($scope){
        $scope.delete = function(){
            alert('Woho, Im deleted!');
        };
    }])
    .directive('confirm', ['$modal', '$parse', function($modal, $parse){
        return {
            link: function(scope, el, attr){
              el.bind('click', function(){
                var instance = $modal.open({
                  templateUrl: 'modal.html',
                  controller: ['$scope', '$modalInstance', modalController]
                });

                instance.result.then(function(){
                  //close - action!
                  $parse(attr.onConfirm)(scope);
                },function(){
                  //dimisss - do nothing
                });
              });
            }
        };

        function modalController(modalScope, $modalInstance){
            modalScope.ok = function(){
                modalInstance.close();
            };
            modalScope.cancel = function(){
                modalInstance.dismiss();
            };
        }
    }]);

InformationsquelleAutor mengstrom

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.