Modals y popups Provider para aplicaciones de angular. js-ngDialog

Vista prévia

Descripción

ngDialog es un módulo para AngularJS para crear Windows modal & ventanas emergentes altamente personalizables en la Página Web.

Uso básico

Cargue los archivos CSS básicos y temáticos de ngDialog en la sección Head de la página.

<link rel="stylesheet" href="../css/ngDialog.css">
<link rel="stylesheet" href="../css/ngDialog-theme-default.css">
<link rel="stylesheet" href="../css/ngDialog-theme-plain.css">

Cree un botón para alternar una ventana modal.

<button type="button" ng-dialog="firstDialogId" ng-dialog-controller="InsideCtrl" ng-dialog-data="{{jsonData}}" ng-dialog-class="ngdialog-theme-default" ng-dialog-show-close="false">Open via directive</button>

Cargue el script de angular. js y ngDialog en la página.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
 <script src="../js/ngDialog.js"></script>

Plantilla modal.

<script type="text/ng-template" id="firstDialogId">
<div class="ngdialog-message">
<h3>ngDialog template</h3>
<p ng-show="theme">Test content for <code>{{theme}}</code></p>
<p ng-show="ngDialogData.foo">Data passed through directive: <code>{{ngDialogData.foo}}</code></p>
</div>
<div class="ngdialog-buttons">
<button type="button" class="ngdialog-button ngdialog-button-primary" ng-click="openSecond()">Open next</button>
</div>
</script>

El JavaScript.

<script>
var app = angular.module('exampleDialog', ['ngDialog']);

app.controller('MainCtrl', function ($scope, $rootScope, ngDialog) {
$rootScope.jsonData = '{"foo": "bar"}';
$rootScope.theme = 'ngdialog-theme-default';

$scope.open = function () {
ngDialog.open({ template: 'firstDialogId', controller: 'InsideCtrl' });
};

$scope.openDefault = function () {
ngDialog.open({
template: 'firstDialogId',
controller: 'InsideCtrl',
className: 'ngdialog-theme-default'
});
};

$scope.openPlain = function () {
$rootScope.theme = 'ngdialog-theme-plain';

ngDialog.open({
template: 'firstDialogId',
controller: 'InsideCtrl',
className: 'ngdialog-theme-plain'
});
};

$scope.openTemplate = function () {
$scope.value = true;

ngDialog.open({
template: 'externalTemplate.html',
className: 'ngdialog-theme-plain',
scope: $scope
});
}
});

app.controller('InsideCtrl', function ($scope, ngDialog) {
$scope.openSecond = function () {
ngDialog.open({
template: '<h3><a href="" ng-click="closeSecond()">Close all by click here!</a></h3>',
plain: true,
closeByEscape: false,
controller: 'SecondModalCtrl'
});
};
});

app.controller('SecondModalCtrl', function ($scope, ngDialog) {
$scope.closeSecond = function () {
ngDialog.close();
};
});

</script>