I know we can retrieve models like this.
<input type="text" name="name" id="firstname" ng-model="firstname" />
In this case, I do know that the models name is firstname. In the controller I can now access it with $scope.firstname.
But what if I do not know which models a developer defines inside a ng-model?
What I want to archieve is to get all models set inside a <form> tag.
Little explaination of scenario.
I made a dialog using AngularJS. The content of the dialog can be anything. The problem I currently face is that when you want to submit a form, the values submitted have to be returned inside a callback function.
The content of the form van be anything, the developer decides. So the content might look like this:
<form ng-submit="submit()">
<strong>Heading</strong>
<p>Some text content</p>
<input type="text" ng-model="firstname" name="firstname" />
<input type="text" ng-model="lastname" name="lastname" />
<button class="btn" ng-click="cancel()">Cancel</button>
<button type="submit" class="btn">Submit</button>
</form>
However, is it possible to get all ng-models using AngularJS?
Snippet
(function () {
angular.module("app", ["dialog"])
.controller("controller", controller);
function controller($scope, dialog) {
$scope.openDialog = function () {
dialog.open({
template: 'dialog',
confirm: function (response, scope) {
console.log(response, scope);
},
cancel: function (response, scope) {
console.log(response, scope);
scope.close();
},
submit: function (response, scope) {
}
});
}
}
angular.module("dialog", [])
.factory("dialog", function ($rootScope, $http, $injector, $compile, $location, $timeout, $q, $templateCache) {
// Inject compiler
$compile = $injector.get('$compile');
// Shortcut for angular element
var _ = angular.element;
// Array with active dialogs
var dialogs = [];
// Create a new scope
var scope = $rootScope.$new();
// Creates the dialog
var __construct = {
new: function (params) {
var container = _('<div class="dialog-container" />');
var dialog = _('<dialog />');
var template = params.template;
// Throw error if no template has been specified
if (!template) {
console.error("No template given! Create an inline template or create a .html template file.");
return;
}
// Check if template is an inline template or .html file
if (template.indexOf('html') !== -1) {
template = $http.get(template);
template.success(function (template) {
__construct.parseTemplate(container, dialog, template);
});
} else {
var template = $templateCache.get(template);
__construct.parseTemplate(container, dialog, template);
}
// Set scopes
__construct.scopes(params)
},
/**
* Appends the template data to the dialog, then appends dialog to the body
*
* @param {object} - Dialog container
* @param {object} - Dialog
* @param {object} - Template file
*/
parseTemplate: function (container, dialog, template) {
// Create DOM data
dialog.attr("open", "");
dialog.appendTo(container);
_(template).appendTo(dialog);
_('body').append($compile(container)(scope));
// Push to active dialogs
dialogs.push(container);
},
/**
* Create scopes and callback functions
*
* @param {object} - Object of given parameters
*/
scopes: function (params) {
scope.submit = function () {
console.log(scope);
}
// Confirm callback
scope.confirm = function () {
// Callback function
var confirm = params.confirm;
// Returns true
return confirm(true, scope);
},
// Cancel callback
scope.cancel = function () {
// Callback function
var cancel = params.cancel;
// Returns true
return cancel(false, scope);
},
// Close callback
scope.close = function () {
// Destroy the latest dialog inside the dialogs array
__destruct.destroy();
}
}
}
/**
* Destroys latest dialog.
* Allways takes the last array item, which has to be the latest dialog.
*/
var __destruct = {
destroy: function () {
// Retrieves and removes last array key
var dialog = dialogs.pop()
// Removes the dialog from the document
_(dialog).remove();
}
}
var __dialog = {
open: function (params) {
__construct.new(params);
},
close: function () {
}
}
return __dialog;
});
})();/*
Dialog stylesheet
@package ...
@author Richard Mauritz
*/
/*
Match -webkit rules
*/
.dialog-container {
background: rgba(0, 0, 0, .5);
position: fixed;
top: 0;left: 0;
height: 100%;
width: 100%;
z-index: 99999999;
}
dialog {
position: absolute;
top: 50%;
left: 50%;
right: 0;
height: auto;
height: auto;
height: auto;
margin: 0;
border: solid;
padding: 1em;
background: white;
color: black;
display: block;
min-width: 350px;
max-width: 700px;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
/*
Override with own style
*/
dialog {
border: 0;
border-radius: 3px;
}
dialog:before,
dialog:after {
display: table;
content: " ";
clear: both;
}
dialog .btn {
border: 0;
padding: 6px 40px !important;
float: right;
margin-top: 15px;
margin-right: 5px;
}
dialog .btn-primary {
background: none;
text-transform: uppercase;
color: #009dff !important;
}
dialog .btn-default {
background: #f1f1f1;
}
dialog .btn-danger {
background: #dd4b39;
color: #fff;
}
dialog .btn-primary:hover,
dialog .btn-primary:focus,
dialog .btn-primary:active,
dialog .btn-primary:active:hover,
dialog .btn-primary:active:focus,
dialog .btn-primary:hover, .btn-primary:focus,
dialog .btn-primary:focus:hover,
dialog .btn-primary:active,
dialog .btn-primary:active:hover {
background: none;
color: #009dff;
}
dialog .btn-default:hover,
dialog .btn-default:focus,
dialog .btn-default:active,
dialog .btn-default:active:hover,
dialog .btn-default:active:focus {
background: #f1f1f1;
}
dialog:not([open]) {
display: none;
}
dialog + .backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999999;
background: rgba(0,0,0,0.4);
}
._dialog_overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
dialog.fixed {
position: fixed;
top: 50%;
transform: translate(0, -50%);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="controller">
<button id="open" ng-click="openDialog()">Open dialog</button>
<script type="text/ng-template" id="dialog">
<form ng-submit="submit()">
<strong>Warning</strong>
<p>Fill in your firstname and lastname</p>
<input type="text" ng-model="firstname" name="firstname" />
<input type="text" ng-model="lastname" name="lastname" />
<button class="btn" ng-click="cancel()">Cancel</button>
<button type="submit" class="btn">Submit</button>
</form>
</script>
</div>
</div>
