Im Prozess der GUI-Programmentwicklung gibt es häufig Konzepte für modale Dialogfelder und nicht-modale Dialogfelder.
Modal -Dialog: Während der Aktivität der untergeordneten Schnittstelle kann das übergeordnete Fenster nicht auf die Nachricht antworten. Exklusive Benutzereingabe
Nicht-modales Dialogfeld: Keine Wirkung zwischen Windows
Hauptunterschiede: Das nicht modale Dialogfeld teilt die Nachrichtenschleife mit der App und besetzt Benutzer nicht ausschließlich.
Das modale Dialogfeld besetzt ausschließlich die Benutzereingaben, und andere Schnittstellen können nicht reagieren
Inhalt dieses Artikels
Angular JS Implementierungsmuster Dialog. Basierend auf AngularJS v1.5.3 und Bootstrap v3.3.6.
Projektstruktur
Abbildung 1 Projektstruktur
Auslaufergebnisse
Abbildung 1 Betriebsergebnisse: großer Modus
index.html
<! DocType html> <!-[wenn lt ie 7]> <html> <! [Endif]-> <!-[wenn dh 7]> <html> <! [Endif]-> <!-[wenn dh 8] <html> <[endif]-> <! 8]> <!-> <html> <!-<!-<! [Endif]-> <head> <meta charset = "utf-8"> <meta http-äquiv = "x-ua-compatible" content = "IE = Edge, Chrome = 1"> <meta-name = "viewport" content = "width =" width = "width =" book & to-acthth = "-Tith" -Tith "-Title> <title> <tits> gweihes. rel = "styleSheet" href = "../ src/per Anbieter/Bootstrap/dist/css/bootstrap.css"> </head> <body ng-App = "MyApp"> <!-modal template-> <script type = "text/ng-template" id = "mylmodelContent.html"> <h3> <h3> <h3> <h3> <h3> <h3> <h3> <h3> <h3> <h3> <h3> <h3> <h3> <h3> <h3> <h3> <h3> <h3> <h3> <h3> <h3> <h3> <h3> <h3> <h3> <h3> <h3> <h3> <h3> <h3> <h3> <h3>; <div> <ul> <li ng-repeat = "item in item in items"> <a ng-klick = "selected ng-klick = "covorn ()"> beenden </button> </script> <div> AngularJS Modal Dialog </div> <ABSCHNITT> <Abschnitt ng-controller = "modalDemo" style = "margin: 40px auto; float: nicht; Hintergrund: #fff; padding: 30px; ng-klick = "open ()"> modal </button> <button ng-klick = "open ('sm')"> kleiner modal </button src = "../ src/vendor/angular/angular.js"> </script> <script src = "http://cdn.bootcs.com/angular-ui-bootstrap/0.11.2/ui-bootstrap-tpls.js"> </script> <script> <script src = "../ src/js/mymodal.js"> </script> </body> </html>myModal.js
/** * */angular.module('myApp', [ 'ui.bootstrap' ])// demo controller.controller('modalDemo', function($scope, $modal, $log) { // list $scope.items = [ 'angularjs', 'backbone', 'canjs', 'Ember', 'react' ]; // open click $scope.open = Funktion (Größe) {var modalinstance = $ modal.open ({templateurl: 'myModelContent.html', Controller: 'modalinStancectrl', // Controller für modale Größe:}}}}) modalinstance.result.then (function (selectedItem) {$ scope.selected = selectedItem;}, function () {$ log.info ('modal entlassene:' + new Date ())}); = items;Der obige Inhalt ist das Dialogfeld AngularJS Modal, das Ihnen vom Editor vorgestellt wurde. Ich hoffe, es wird für alle hilfreich sein!