Why ng-click is not working in my angular datatable? - angularjs

I do now know, but I think jquery is conflicting with my angular datatable, but even when I take off jquery (hide and show elements), ng-click keeps not working.
Here goes as well a printscreen from my table:
My AngularJS js:
angular.module('BoxApp').controller("ConfiguraBkpEmail", function($scope, $http) {
var urlRestServer = "http://localhost:8080/boxmlV2";
$scope.clientes = {};
$scope.clientesSelecionados = {};
$scope.iniciar = function() {
$http.get(urlRestServer + '/configurabkpemail').success(function(response) {
$scope.clientes = response;
});
};
$scope.iniciar();
$scope.selecionaClientes = function(selecao){
$scope.clientesSelecionados = selecao;
$('#myModal').modal('show');
if($scope.clientesSelecionados.backupEmail == 0){
// $('#enderecoEmailBackup').hide();
// $('#idLabel').hide();
} else {
// $('#enderecoEmailBackup').show();
// $('#idLabel').show();
}
};
/**
* Trecho para validar o form ao submeter.
*/
$scope.submitted = false;
$scope.submitForm = function(form) {
$scope.submitted = true;
if (form.$valid) {
$scope.editaEmailBkp();
}
};
$scope.editaEmailBkp = function() {
var dados = {
idCliente : idCliente.value,
razaoSocial : razaoSocial.value,
backupEmail : $scope.clientesSelecionados.backupEmail,
enderecoEmailBackup : enderecoEmailBackup.value
};
$http.post(urlRestServer + '/configurabkpemail/salvar', dados).then(function(response) {
$scope.sucesso();
}, function(response) {
});
};
$scope.sucesso = function() {
$scope.closeModal();
$scope.iniciar();
};
$scope.closeModal = function() {
// $('#myModal').modal('hide');
};
$scope.opcoesBkps = [
{OpcaoBkpID: 0, Tipo: '0 - Sem backup de e-mail'},
{OpcaoBkpID: 1, Tipo: '1 - Backups inconsistentes'},
{OpcaoBkpID: 2, Tipo: '2 - Backup de Todos E-mails'}
];
});
My html:
<div class="row">
<table datatable="ng" id="configuraBkpEmail" class="row-border hover table table-striped table-bordered table-hover">
<thead>
<tr>
<th>Nome Empresa</th>
<th>CNPJ</th>
<th>Backup E-mail</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in clientes" ng-click="selecionaClientes(x)">
<td><span ng-bind="x.razaoSocial" /></td>
<td><span ng-bind="x.cnpj" /></td>
<td><span ng-bind="x.strOpcaoBackupEmail" /></td>
</tr>
</tbody>
</table>
</div>
My modal that should be opened:
<!-- Modal INICIO-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">Configuração Backup de E-mail</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<f<div ultimate-datatable="datatable" width="100%"></div>orm name="form" id="form_sample_2" role="form"
class="form-horizontal ng-pristine ng-valid" novalidate>
<div class="form-group">
<label class="control-label col-md-3">Nome:<span
class="required" aria-required="true"> * </span></label>
<div class="col-md-9">
<input type="text"
ng-model="clientesSelecionados.razaoSocial"
class="form-control" id="razaoSocial" maxlength="100"
name="razaoSocial" required disabled> <span
style="color: red"
ng-show="submitted && form.razaoSocial.$error.required">Campo
Nome Obrigatório.</span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Backup de
E-mail:<span class="required" aria-required="true"> *
</span>
</label>
<div class="col-md-9">
<select size="1" name="backupEmail"
ng-model="clientesSelecionados.backupEmail"
ng-change="selecionaClientes(clientesSelecionados)"
class="form-control"
ng-options="opcoesBkp.OpcaoBkpID as opcoesBkp.Tipo for opcoesBkp in opcoesBkps"
required>
<option value="">Selecione um Recurso.</option>
</select> <span style="color: red"
ng-show="form.backupEmail.$error.required">Selecione
uma opção de backup.</span>
</div>
</div>
<div class="form-group">
<label id="idLabel" class="control-label col-md-3">Endereço:<span
class="required" aria-required="true"> * </span>
</label>
<div class="col-md-9">
<input type="email"
placeholder="Endereço do Backup para encaminhamento."
ng-model="clientesSelecionados.enderecoEmailBackup"
class="form-control" id="enderecoEmailBackup"
maxlength="100" name="enderecoEmailBackup">
</div>
</div>
<div class="form-group">
<label id="idLabel" class="control-label col-md-3">ID:<span
class="required" aria-required="true"> * </span></label>
<div class="col-md-9">
<input type="text" ng-model="clientesSelecionados.idCliente"
class="form-control" id="idCliente" maxlength="100"
name="idCliente" disabled> <span
style="color: red"
ng-show="submitted && form.idCliente.$error.required">Campo
ID Obrigatório.</span>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Cancelar
</button>
<button type="submit" class="btn btn-primary" ng-click="submitForm(form)">
Salvar
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- Modal FIM-->

Try ng-click="$parent.selecionaClientes(x)".

Related

Angular JS reloading whole body when clicked on Other Tabs

My web page has 3 bootstrap tabs with data some data being populated run time. After page loads, tab1 looks fine and when I click on other tabs, whole body reloads and tab1 displays. I do not see any errors in Console.
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<div class="container" -ng-controller="incidentSummaryCtrl" >
<div class="panel panel-primary">
<div class="panel-heading"><h3>Incident {{c.data.incidentData[0].incidentId}} </h3> </div>
<div class="panel-body" style="padding:0px">
<div class="panel-group">
<div class="container">
<div class="row text-center">
<h1 class="white"></h1>
</div>
<div class="row">
<div class="col-md-10">
<div class="tab" role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Incident Information</li>
<li role="presentation" class="">Potential Indicators</li>
<li role="presentation" class="">Course of Action</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade active in" id="Section1">
<div class="col-md-3 col-xs-3">
<p><label>First Name: </label> {{c.data.incidentData[0].firstName}} </p>
<p><label>Last Name: </label> {{c.data.incidentData[0].lastName}} </p>
<p><label>Email: </label> {{c.data.incidentData[0].email}} </p>
<p><label>Telephone Number: </label> {{c.data.incidentData[0].telephoneNumber}} </p>
<p><label>Reported Date: </label> {{c.data.incidentData[0].createdDate}} </p>
<p><label>Last Updated: </label> {{c.data.incidentData[0].lastUpdated}} </p>
</div>
<div class="col-md-3 col-xs-3">
<p><label>Incident #: </label> {{c.data.incidentData[0].incidentId}} </p>
<p><label>Status: </label> {{c.data.incidentData[0].incidentStatus}} </p>
<p><label>Category: </label> {{c.data.incidentData[0].incidentType}} </p>
<p><label>Organization: </label> {{c.data.incidentData[0].organization}} </p>
<p><label>Department: </label> {{c.data.incidentData[0].department}} </p>
<p><label>Assigned To: </label> {{c.data.incidentData[0].assignedTo}} </p>
</div>
<div class="col-md-12 col-xs-12">
<p><label for="notes">Notes:</label> </p>
<textarea class="form-control" rows="5" id="notes" ng-readonly="true">{{c.data.incidentData[0].note}}</textarea>
</div>
</div> <!-- End of Section1 -->
<div role="tabpanel" class="tab-pane fade" id="Section2">
<label>Extracted Potential Indicators</label>
<table class="table table-condensed table-hover table-bordered">
<thead>
<tr>
<th>No</th>
<th>Ranking</th>
<th>Indicator</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="indicator in c.data.indicatorsData track by $index" >
<td>{{indicator.number}}</td>
<td>{{indicator.urgencyRanking}}</td>
<td>{{indicator.indicatorText}}</td>
<td class="{{indicator.cssClass}}">{{indicator.indicatorStatus}}</td>
</tr>
</tbody>
</table>
</div> <!-- End of Section2 -->
<div role="tabpanel" class="tab-pane fade" id="Section3">
<p><label>Recommendation: </label> {{c.data.courseOfActionsData[0].recommendedName}} </p>
<p><label>Reasoning: </label> {{c.data.courseOfActionsData[0].reasoning}} </p>
<p><label>Select Course of Action: </label>
<select class="form-control" id="sel1" ng-model="selectedValue" style="max-width:700px">
<option ng-repeat="coa in c.data.ListOfCourseOfActionsData track by $index" value="{{coa.name}}" ng-selected="{{defaultvalue == c.data.courseOfActionsData[0].recommendedName}}">{{coa.name}}</option>
</select> </p>
<p><label>Additional Actions: </label> </p>
<div id="actions">
<label class="checkbox-inline"><input type="checkbox" value="" id="sendEmailUpdateToReporter">Send Email Update to Reporter</label>
<label class="checkbox-inline"><input type="checkbox" value="" id="notifyIsp" ng-model="notifyIsp">Notify ISP</label>
<label class="checkbox-inline"><input type="checkbox" value="" id="notifyDomainRegistrar" ng-model="notifyDomainRegistrar">Notify Domain Registrar</label> <br/>
<label class="checkbox-inline"><input type="checkbox" value="" id="sendEmailReceipt">Send Email Receipt to Reporter</label>
<label class="checkbox-inline"><input type="checkbox" value="" id="setStatusOfTicketToResolved">Set Status of Ticket Resolved
</label>
<label class="checkbox-inline"><input type="checkbox" value="" id="notifyProduction">Notify Production</label><br/>
<label class="checkbox-inline"><input type="checkbox" value="" id="resolveAndCloseTicket">Resolve and Close Ticket</label>
<label class="checkbox-inline"><input type="checkbox" value="" ng-model="checked" id="assignToGroup">Assign to Group</label>
<br/>
</div> <br/>
<div class="row">
<div id="assignment" class="col-md-4">
<b>Group Name:</b>
<select id="groupSelectedValue" ng-model="groupSelectedValue" style="max-width:700px" class="form-control">
<option value="Tier1">Tier1</option>
<option value="Tier2">Tier2</option>
<option value="Tier3">Tier3</option>
<option value="Tier4">Tier4</option>
<option value="Tier5">Tier5</option>
<option value="Halo Administrator">Halo Administrator</option>
</select>
</div>
<div class="col-md-4">
<b>Assign To:</b>
<select id="assignTo" ng-model="assignTo" style="max-width:700px" class="form-control" >
<option ng-repeat="user in (c.data.groupUsers | filter: {'groupName':groupSelectedValue}) track by $index" value="user.name">{{user.name}}</option>
</select>
</div>
</div>
<br/>
<div id="commentsSection" >
<div class="">
<span ng-hide="c.data.incidentData[0].incidentStatus == 'Closed'">
<b>Comments:</b> <textarea id="comments" class="form-control" ng-model="comments"> </textarea> <br/>
</span>
</div>
<br/>
<div class="">
<b>Comments History: </b>
<table class="table table-responsive">
<thead>
<tr>
<th>Comment </th>
<th>Entered Date </th>
<th>Entered By </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="text in c.data.commentshistory track by $index">
<td>{{text.comment}}</td>
<td>{{text.enteredDate}}</td>
<td>{{text.enteredBy}}</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-primary" ng-click="execute()">Execute</button>
<input type="hidden" id="sysId" value="{{sysId}}">
</div>
</div>
</div> <!-- End of Section3 -->
</div>
</div>
</div>
</div>
</div> <!-- End of Container -->
</div> <!--End of Panel Group -->
</div>
</div>
</div>
Angular JS Code:
(function()
{
"use strict";
var app=angular.module('indicatorModal',[]);
app.controller('incidentSummaryCtrl',['$scope',function($scope)
{
$scope.updateSelectedCoa=function()
{
//get Values from Form
var selectedCoa=jQuery("#sel1 option:selected").text();
var sendEmailUpdateToReporter=jQuery("#sendEmailUpdateToReporter").is(":checked");
var notifyIsp=jQuery("#notifyIsp").is(":checked");
var notifyDomainRegistrar=jQuery("#notifyDomainRegistrar").is(":checked");
var sendEmailReceipt=jQuery("#sendEmailReceipt").is(":checked");
var setStatusOfTicketToResolved=jQuery("#setStatusOfTicketToResolved").is(":checked");
var notifyProduction=jQuery("#notifyProduction").is(":checked");
var assignToNextTier=jQuery("#assignToNextTier").is(":checked");
var assignToGroup=jQuery("#assignToGroup").is(":checked");
var resolveAndCloseTicket=jQuery("#resolveAndCloseTicket").is(":checked");
var sysId=jQuery("#sysId").val();
var gr=new GlideRecord('x_19668_halo_incident');
gr.addQuery('sys_id',sysId);
gr.query(callbackFunction);
function callbackFunction(gr)
{
if(gr.next())
{
$scope.updateSelectedSysIdOfCoa(selectedCoa,sysId);
gr.send_email_update_to_reporter=sendEmailUpdateToReporter;
gr.notify_isp=notifyIsp;
gr.send_email_receipt_to_reporter=sendEmailReceipt;
gr.set_status_to_resolved=setStatusOfTicketToResolved;
gr.notify_production=notifyProduction;
gr.notify_domain_registrar=notifyDomainRegistrar;
gr.assign_to_tier=assignToNextTier;
gr.assign_to_group=assignToGroup;
gr.resolve_and_close_the_ticket=resolveAndCloseTicket;
gr.update();
}
}
};
$scope.updateSelectedSysIdOfCoa=function(selectedCoa,sysId)
{
var selectedCoaSysId='';
var gr1=new GlideRecord('x_19668_halo_selcted_ticket_course_of_action');
gr1.addQuery('incident_id',sysId);
gr1.query(callbackFunction2);
function callbackFunction2(gr1)
{
if(gr1.next())
{
var gr2=new GlideRecord('x_19668_halo_courseofactions');
gr2.addQuery('ticket_coa_name',selectedCoa);
gr2.query();
if(gr2.next())
{
selectedCoaSysId=gr2.sys_id+'';
}
gr1.ticket_coa_selected_id=selectedCoaSysId;
gr1.update();
}
}
};
$scope.passSysId=function(indicatorSysId,indicatorType)
{
var ipIndicatorsData = JSON.parse(sessionStorage.getItem('ipIndicatorsData'));
var domainIndicatorsData = JSON.parse(sessionStorage.getItem('domainIndicatorsData'));
var hashCodeIndicatorsData = JSON.parse(sessionStorage.getItem('hashCodeIndicatorsData'));
if(indicatorType == 'IP Address')
{
for(var indicator in ipIndicatorsData )
{
if(ipIndicatorsData[indicator].sysId == indicatorSysId)
{
jQuery("#indicatorId").text(ipIndicatorsData[indicator].indicatorId);
jQuery("#indicatorStatus").text(ipIndicatorsData[indicator].indicatorStatus);
jQuery("#indicatorType").text(ipIndicatorsData[indicator].indicatorType);
jQuery("#urgencyRanking").text(ipIndicatorsData[indicator].urgencyRanking);
jQuery("#completedEnrichCount").text(ipIndicatorsData[indicator].completedEnrichCount);
jQuery("#enrichStartTimestamp").text(ipIndicatorsData[indicator].enrichStartTimestamp);
jQuery("#enrichEndTimestamp").text(ipIndicatorsData[indicator].enrichEndTimestamp);
jQuery("#indicatorText").text(ipIndicatorsData[indicator].indicatorText);
$("#indicatorLink").attr("href", "https://dev21310.service-now.com/haloportal/?id=potential_indicator_summary&indicator_id="+indicatorSysId);
}
}
}
else if(indicatorType == 'Full Qualified Domain Name (FQDN)')
{
for(var indicator in domainIndicatorsData )
{
if(domainIndicatorsData[indicator].sysId == indicatorSysId)
{
jQuery("#indicatorId").text(domainIndicatorsData[indicator].indicatorId);
jQuery("#indicatorStatus").text(domainIndicatorsData[indicator].indicatorStatus);
jQuery("#indicatorType").text(domainIndicatorsData[indicator].indicatorType);
jQuery("#urgencyRanking").text(domainIndicatorsData[indicator].urgencyRanking);
jQuery("#completedEnrichCount").text(domainIndicatorsData[indicator].completedEnrichCount);
jQuery("#enrichStartTimestamp").text(domainIndicatorsData[indicator].enrichStartTimestamp);
jQuery("#enrichEndTimestamp").text(domainIndicatorsData[indicator].enrichEndTimestamp);
jQuery("#indicatorText").text(domainIndicatorsData[indicator].indicatorText);
jQuery("#indicatorLink").attr("href", "https://dev21310.service-now.com/haloportal/?id=potential_indicator_summary&indicator_id="+indicatorSysId);
}
}
}
else if(indicatorType == 'Hash Code')
{
for(var indicator in hashCodeIndicatorsData )
{
if(hashCodeIndicatorsData[indicator].sysId == indicatorSysId)
{
jQuery("#indicatorId").text(hashCodeIndicatorsData[indicator].indicatorId);
jQuery("#indicatorStatus").text(hashCodeIndicatorsData[indicator].indicatorStatus);
jQuery("#indicatorType").text(hashCodeIndicatorsData[indicator].indicatorType);
jQuery("#urgencyRanking").text(hashCodeIndicatorsData[indicator].urgencyRanking);
jQuery("#completedEnrichCount").text(hashCodeIndicatorsData[indicator].completedEnrichCount);
jQuery("#enrichStartTimestamp").text(hashCodeIndicatorsData[indicator].enrichStartTimestamp);
jQuery("#enrichEndTimestamp").text(hashCodeIndicatorsData[indicator].enrichEndTimestamp);
jQuery("#indicatorText").text(hashCodeIndicatorsData[indicator].indicatorText);
$("#indicatorLink").attr("href", "https://dev21310.service-now.com/haloportal/?id=potential_indicator_summary&indicator_id="+indicatorSysId);
}
}
}
};
}]);
})();
I would suggest you to use Angular UI instead of bootstrap
https://angular-ui.github.io/bootstrap/

close bootstrap modal window using angularjs after submit

I'm creating an inventory app, and the user has the option to add a new product or edit an existing one. Both options bring up the same modal window, and I want it to close automatically after the user clicks on submit.
Below is part of my code, my entire code is here: http://codepen.io/andresq820/pen/LWGKXW
HTML
<div class="modal fade" id="editItemModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">{{title(item.code)}}</h4>
</div>
<div class="modal-body">
<form name="myEditForm" ng-submit="editProduct(item)">
<div class="form-group">
<label for="code">Code:</label>
<input type="text" size="5" maxlength="5" minlength="3" class="form-control" name="code" id="code"
ng-model="item.code" ng-disabled="false" ng-pattern="/^[a-zA-Z0-9]*$/">
<span ng-show="myEditForm.code.$error.pattern">Code can only be alphanumeric.</span> </br>
<span ng-show="myEditForm.code.$error.minlength">Code has to be at least 3 characters</span>
</div>
<div class="form-group">
<label for="description">Description:</label>
<input type="text" class="form-control" name="description" id="description" ng-model="item.description" required>
<span ng-show="myEditForm.description.$touched && myEditForm.description.$invalid">The description is required.</span>
</div>
<div class="form-group">
<label for="amount">Amount:</label>
<input type="number" class="form-control" name="amount" id="amount" size="5" maxlength="5"
ng-model="item.amount" ng-pattern="/^[0-9]{1,7}$/">
<span ng-show="myEditForm.amount.$error.pattern">Only whole numbers are allowed</span>
</div>
<div class="form-group">
<label for="newImage">{{loadImg}}</label>
<input type="file" class="form-control" name="newImage" id="newImage" ng-model="item.image">
</div>
<div class="form-group" ng-show="displayRadioBtns">
<label for="radio">Type:</label>
<div class="radio">
<label><input type="radio" name="optradio" ng-model="item.type" value="in">In</label>
<label><input type="radio" name="optradio" ng-model="item.type" value="out">Out</label>
</div>
</div>
<div class="modal-footer">
<input type="button" class="btn btn-default" data-dismiss="modal" value="Close" />
<input type="submit" class="btn btn-primary pull-right" value="Submit" ng-disabled="myEditForm.$invalid"/>
</div>
</form>
</div>
</div>
</div>
</div>
ANGULARJS
$scope.editProduct = function(item){
var index = $scope.items.indexOf(item);
console.log(index);
console.log(item);
console.log(item.code.valueOf());
if(index == -1){
console.log('new item');
$scope.item.code = item.code;
$scope.item.description = item.description;
$scope.item.in = item.amount;
$scope.item.out = 0;
$scope.item.createdOn = Date.now();
$scope.items.push($scope.item);
$scope.item = {};
}else{
console.log('edit item');
console.log(item);
console.log(item.type);
console.log($scope.item.type);
console.log(index);
$scope.items[index].code = item.code;
console.log($scope.items[index].code);
$scope.items[index].description = item.description;
console.log($scope.items[index].description);
$scope.items[index].image = item.image;
if($scope.item.type == 'in'){
console.log($scope.item.type);
console.log(typeof($scope.items[index].in));
console.log(typeof($scope.item.amount));
console.log(typeof(item.amount));
$scope.items[index].in += item.amount;
console.log($scope.items[index].in);
$scope.item = {};
}else if($scope.item.type == 'out'){
console.log($scope.item.type);
$scope.items[index].out += $scope.item.amount;
$scope.item = {};
}else{
alert("Type is a required field");
return;
};
}
};
You can make function calls on ngSubmit
form class="well" (ngSubmit)="addUserModal.hide(); addUser(model); userForm.reset()" #userForm="ngForm"
I haven't used AngularJS, but the following works for me in Angular 2, if you're able to use jQuery:
$(".modal").modal("hide")
Fire button click on submit event in angularJS.
<input id="quemodalcancel" type="submit" value="Cancel" class="btn blue_btn" data-dismiss="modal" aria-hidden="true">
$scope.editProduct = function(item){
// submit button code
document.querySelector('#quemodalcancel').click();
}

Recaptcha cant get response in angular after changing page

I have a problem with my angular application. I have a register page on my site. Normally when I get straight to the register page it works fine, after submitting the form is sent and user is registered. Problem appears when I for example load register page then go to login page and then again to register. In this case the form is not sent to server.
I tried to figure it out and even to repair by refreshing page after clicking register link but it didn't help.
I debug my application a little and found that it's recaptcha causing my problem. I use angular-recaptcha version 2.2.5; Tried to log the output of vcRecaptchaService.getResponse() but nothing showed in console.
Here is some code, where the problem may lay:
Request of form
$scope.registerRequest = (form) => {
$scope.$broadcast('show-errors-check-validity');
if (!form.$valid) {
return;
}
$scope.isLoading = true;
$scope.formData.reCaptcha = vcRecaptchaService.getResponse();
apiRequest.post('user/register', $scope.formData).success((response) => {
$scope.isLoading = false;
$scope.registered = true;
$scope.formData = {};
});
};
Routes:
app.config(['$routeProvider', ($routeProvider) => {
$routeProvider
.when('/auth/login', {
controller: 'authLogin',
label: 'Logowanie',
templateUrl: 'app/components/authLoginView.html',
access: ['UNAUTH']
})
.when('/auth/register/', {
controller: 'authRegister',
label: 'Rejestracja',
templateUrl: 'app/components/authRegisterView.html',
access: ['UNAUTH']
})
.when('/auth/register/confirm', {
controller: 'authRegister',
label: 'Potwierdzenie rejestracji',
templateUrl: 'app/components/authRegisterView.html',
access: ['UNAUTH']
})
.when('/auth/register/resend', {
controller: 'authRegister',
label: 'Rejestracja',
templateUrl: 'app/components/authRegisterView.html',
access: ['UNAUTH']
})
}]);
And some HTML:
<div ng-if="section == 'register'" class="container employer-container">
<form name="registerForm" class="form-horizontal col-sm-6 col-sm-offset-3" loader is-loading="isLoading">
<h4 class="employer-h4">Rejestracja</h4>
<p class="bg-success text-success col-xs-12" ng-show="registered">
Użytkownik został zarejestrowany. Na podany adres e-mail wysłaliśmy dalsze instrukcje.
</p>
<div ng-hide="registered">
<div class="form-group" show-errors>
<label for="email" class="col-md-3 control-label">E-mail:</label>
<div class="col-md-9">
<input type="text" class="form-control" id="email" placeholder="E-mail"
ng-model="formData.email" name="username"
ng-required="true">
</div>
</div>
<div class="form-group" show-errors>
<label for="password" class="col-md-3 control-label">Hasło:</label>
<div class="col-md-9">
<input type="password" class="form-control" id="password" placeholder="Hasło"
ng-model="formData.password" name="password" ng-minlength="5"
ng-required="true" equals="{{ formData.confirmPassword }}">
</div>
</div>
<div class="form-group" show-errors>
<label for="confirmPassword" class="col-md-3 control-label">Powtórz hasło:</label>
<div class="col-md-9">
<input type="password" class="form-control" id="confirmPassword" placeholder="Powtórz hasło"
ng-model="formData.confirmPassword" name="confirmPassword" ng-minlength="5"
ng-required="true" equals="{{ formData.password }}">
</div>
</div>
<div class="form-group" show-errors>
<label class="col-md-3 control-label" for="userType">Rodzaj konta:</label>
<div class="col-md-9">
<div class="btn-group" dropdown>
<button type="button" class="btn btn-default dropdown-toggle form-control"
id="userType" name="userType" dropdown-toggle ng-model="formData.userType"
ng-required="true">
{{ userTypes[formData.userType] || 'rodzaj konta' }} <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li ng-repeat="(key, userType) in userTypes">
{{ ::userType }}
</li>
</ul>
</div>
</div>
</div>
<div class="form-group" show-errors>
<div class="col-md-3"></div>
<div class="col-md-9">
<input class="form-control" type="checkbox" id="acceptTerms" ng-model="formData.acceptedTerms" name="acceptTerms" ng-required="true">
<label class="control-label" style="text-align: left;" for="acceptTerms">Zgadzam się z  Regulaminem</label>
</div>
</div>
<div class="form-group" show-errors>
<div class="col-md-3"></div>
<div class="col-md-9">
<input class="form-control" type="checkbox" id="acceptTerms2" ng-model="formData.acceptedTerms2" name="acceptTerms2" ng-required="true">
<label class="control-label" style="text-align: left;" for="acceptTerms2">Wyrażam zgodę na przetwarzanie moich danych w celu realizacji usług w ramach Serwisu i akceptuję Politykę Prywatności..</label>
</div>
</div>
<div class="form-group" show-errors>
<div class="col-md-3"></div>
<div class="col-md-9">
<input class="form-control" type="checkbox" id="acceptTerms3" ng-model="formData.acceptedTerms3" name="acceptTerms3" ng-required="true">
<label class="control-label" style="text-align: left;" for="acceptTerms3">Wyrażam zgodę na przetwarzanie moich danych w celach marketingowych.</label>
</div>
</div>
<div class="form-group">
<div class="col-md-9 col-md-offset-3">
<div vc-recaptcha key="'key'"></div>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-3">
Zapomniane hasło |
Logowanie
</div>
<div class="col-md-3 text-right">
<button type="submit" class="btn btn-info" ng-click="registerRequest(registerForm)">Zarejestruj</button>
</div>
</div>
</div>
</form>
</div>
Problem could be seen here: http://pze2.biuro.netivo.pl/
Answering to one of questions about ['UNAUTH'] in my routes. It is for allowing only users who are not logged in to enter this page.
Thanks to Vinny I managed to solve the problem.
The problem lies as he said in reCaptcha.getResponse() not getting right widget.
For those who will have same problem I put the solution in my code:
Request:
$scope.registerRequest = (form) => {
$scope.$broadcast('show-errors-check-validity');
if (!form.$valid) {
return;
}
$scope.isLoading = true;
apiRequest.post('user/register', $scope.formData).success((response) => {
$scope.isLoading = false;
$scope.registered = true;
$scope.formData = {};
});
};
HTML:
<div ng-if="section == 'register'" class="container employer-container">
<form name="registerForm" class="form-horizontal col-sm-6 col-sm-offset-3" loader is-loading="isLoading">
<h4 class="employer-h4">Rejestracja</h4>
<p class="bg-success text-success col-xs-12" ng-show="registered">
Użytkownik został zarejestrowany. Na podany adres e-mail wysłaliśmy dalsze instrukcje.
</p>
<div ng-hide="registered">
...
<div class="form-group">
<div class="col-md-9 col-md-offset-3">
<div vc-recaptcha ng-model="formData.reCaptcha" key="'key'"></div>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-3">
Zapomniane hasło |
Logowanie
</div>
<div class="col-md-3 text-right">
<button type="submit" class="btn btn-info" ng-click="registerRequest(registerForm)">Zarejestruj</button>
</div>
</div>
</div>
</form>
</div>

How to get an html content in modal-body

I'm having trouble passing a html (form) for body modal.
Use the modal as a service, and have a standard template for the modal. If not past the template will of course use the default. And thus fail to repeat code.Then I wanted to go into the modal only the content that will be passed in scope.
modal.service.js
(function() {
var app = angular.module('app');
function ModalService($rootScope, $q, $modal) {
var defaultOptions = getModalDefaultOptions();
var service = {
showModal: showModal
};
return service;
function getModalDefaultOptions() {
return {
templateUrl: '/app/shared/modals/templates/modal.default.html',
closeButtonText: 'Fechar',
actionButtonText: 'OK',
headerTitle: 'Header default',
bodyContent: 'Conteúdo body modal',
showActionButton: true,
showCloseButton: true,
headerClass: ''
};
}
function showModal(customModalOptions) {
var deferred = $q.defer();
//Create temp objects to work with since we're in a singleton service
var tempModalOptions = {};
//Map modal.html $scope custom properties to defaults defined in service
angular.extend(tempModalOptions, defaultOptions, customModalOptions);
var scope = $rootScope.$new();
scope.modalOptions = tempModalOptions;
scope.modalOptions.ok = function(result) {
deferred.resolve();
modal.hide();
};
scope.modalOptions.close = function(result) {
deferred.reject();
modal.hide();
};
var modal = $modal({
scope: scope,
templateUrl: scope.modalOptions.templateUrl,
title: scope.modalOptions.headerTitle,
content: scope.modalOptions.bodyContent,
show: true
});
console.log(tempModalOptions);
return deferred.promise;
}
}
app.factory('ModalService', ModalService);
})();
modal.default.html
<div class="modal" role="dialog" tabindex="-1" data-type="Modal Default">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" data-ng-class="modalOptions.headerClass" ng-show="title">
<button class="close" ng-click="modalOptions.close();" type="button">×</button>
<h4 class="modal-title" ng-bind="modalOptions.headerTitle"></h4>
</div>
<div class="modal-body" ng-bind="modalOptions.contentTemplate">{{modalOptions.contentTemplate}}</div>
<div class="modal-footer">
<button class="btn btn-default" data-ng-click="modalOptions.close();" data-ng-show="modalOptions.showCloseButton" type="button">
{{modalOptions.closeButtonText}}</button>
<button class="btn btn-primary" data-ng-click="modalOptions.ok();" data-ng-show="modalOptions.showActionButton">
{{modalOptions.actionButtonText}}</button>
</div>
</div>
</div>
</div>
entidades.controller.js
(function() {
'use strict';
var app = angular.module('app');
app.controller('EntidadesController', EntidadesController);
function EntidadesController(EntidadeService, ModalService) {
var vm = this;
vm.entidades = JSON.parse(EntidadeService.getAll());
vm.openEditEntidades = function() {
ModalService.showModal({
headerClass: 'danger',
contentTemplate: '/app/modulos/entidades/views/edit-entidades.html'
})
.then(function() {
alert('Alert Modal 2');
});
};
// console.log('Entidades onDemand');
}
})();
The view that calls the modal
<section ng-controller="EntidadesEditCtrl as ctrl">
<div class="modal-header">
<h3 class="modal-title">Editando entidade</h3>
</div>
<div class="row">
<div class="modal-body">
<form novalidate class="form-inline">
<div class="col-md-6">
<div class="form-group">
<label class="sr-only" for="fm_name">Email address</label>
<input class="form-control" id="fm_name" ng-model="vm.entidade.name" type="text">
</div>
<div class="form-group">
<label class="sr-only" for="fm_email">Email</label>
<input class="form-control" id="fm_email" ng-model="vm.entidade.email" type="email">
</div>
<div class="form-group">
<label class="sr-only" for="fm_sexo">Sexo</label>
<input class="form-control" id="fm_sexo" ng-model="vm.entidade.gender" type="text">
</div>
<div class="form-group">
<label class="sr-only" for="fm_companhia">Companhia</label>
<input class="form-control" id="fm_companhia" ng-model="vm.entidade.company" type="text">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="sr-only" for="fm_id">User ID</label>
<input class="form-control" id="fm_id" ng-model="vm.entidade._id" type="text">
</div>
<div class="form-group">
<label class="sr-only" for="fm_phone">Telefone</label>
<input class="form-control" id="fm_phone" ng-model="vm.entidade.phone" type="tel">
</div>
<div class="form-group">
<label class="sr-only" for="fm_endereco">Endereço</label>
<input class="form-control" id="fm_endereco" ng-model="vm.entidade.address" type="text">
</div>
<div class="checkbox">
<label>
<input type="checkbox" ng-model="vm.entidade.isActive">{{vm.entidade.isActive}}
</label>
</div>
</div>
</form>
</div>
</div>
<br>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ctrl.update(vm.entidade); vm.ok()" type="button">OK</button>
<button class="btn btn-warning" ng-click="vm.cancel()" type="button">Cancel</button>
</div>
</section>
and the content to be inserted into body-modal
<div class="row" ng-controller="EntidadesController as ectrl">
<div class="row text-center">
<h1>Gerenciar entidades</h1>
</div>
<hr>
<div class="row col-md-10 col-md-offset-1">
<table class="table table-striped" st-table="rowCollection">
<thead>
<div class="panel ">
<div class="panel-heading">
<button class="btn btn-default pull-right" ng-click="open()">Add</button>
<div class="clearfix"></div>
</div>
</div>
<tr>
<th>#</th>
<th>Nome</th>
<th>Compania</th>
<th>Telefone</th>
<th>email</th>
<th>ação</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="entidade in ectrl.entidades">
<td>{{entidade._id}}</td>
<td>{{entidade.name}}</td>
<td>{{entidade.company}}</td>
<td>{{entidade.phone}}</td>
<td>{{entidade.email}}</td>
<td>
<button class="btn btn-default" ng-click="ectrl.openEditEntidades(entidade)" type="button">
Editar
</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="text-center" colspan="5">
<div st-displayed-pages="7" st-items-by-page="itemsByPage" st-pagination=""></div>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
Thanks for u time.
You should use ng-include to insert another template.
<div class="modal" role="dialog" tabindex="-1" data-type="Modal Default">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" data-ng-class="modalOptions.headerClass" ng-show="title">
<button class="close" ng-click="modalOptions.close();" type="button">×</button>
<h4 class="modal-title" ng-bind="modalOptions.headerTitle"></h4>
</div>
<div class="modal-body" ng-include="modalOptions.contentTemplate"></div>
<div class="modal-footer">
<button class="btn btn-default" data-ng-click="modalOptions.close();" data-ng-show="modalOptions.showCloseButton" type="button">
{{modalOptions.closeButtonText}}</button>
<button class="btn btn-primary" data-ng-click="modalOptions.ok();" data-ng-show="modalOptions.showActionButton">
{{modalOptions.actionButtonText}}</button>
</div>
</div>
</div>
</div>

select2 not working inside angularjs tabs

i have angularjs tab and i need select2 inside one of them.select2 woking in all of my page but not inside tab.
parts of tab code is:
<script type="text/ng-template" id="MetaIndicators.tpl.html" >
<div class="row col-xs-12" style=" margin-right:10px;margin-top:22px" >
<div class="form-group inline col-xs-12">
<div class=" form-group inline meta-form-groups col-xs-12">
<label class="metaLabels">ژانر</label>
<textarea name="Genre" data-kind="1" type="text" class=" form-control inline" ng-model="indicators1" ng-bind="indicators1" style="width:400px;float:right" readonly/>
<button class="btn btn-danger inline" style="margin-right: 35px;margin-top: 8px;" data-toggle="modal" data-target="#send-modal-IndicatorsGenre" ng-show="AllowEdit">ویرایش</button>
</div>
</div>
<div class="modal fade" id="send-modal-IndicatorsGenre" role="dialog" aria-hidden="true">
<div class="modal-dialog" style="background-color: white; margin-top: 100px;height: 179px; width:680px;">
<div class="modal-body" style="height:80%">
<form id="metaIndicatorsGenreInsert" class="form-horizontal" role="form">
<div class="col-xs-12" style="margin-top:8px;">
<label for="GenreID" class="col-xs-1 control-label" style="width:59px">ژانر</label>
<div class="col-xs-10">
<select multiple id="e1" style="width:500px">
<option></option>
<option ng-repeat="gn in GenreID" value="{{ gn.Key }}" ng-model="gn.Value">{{ gn.Value }}</option>
</select>
</div>
</div>
<hr class="stylish" />
<div class="col-xs-12" style="margin-top:20px;">
<i class="fa fa-mail-forward"></i> ثبت
انصراف
</div>
</form>
</div>
</div>
</div>
</script>
i add select2.min.js and select2.min.css to index .
function of fill select is :
function GetGenreListData() {
var Genre = metaService.CallService('get', "basic/GenreID", "");
Genre.success(function (data) {
$scope.GenreID = data;
}).error(function (data, status) {
alert($cookies.get('searchedMeta') + data.status);
});
}
and function of setting select2 is :
$("#e1").select2({
closeOnSelect: false
});
thanks alot

Resources