I am using bootstrap datetimepicker. Normally it is working. But in the modal pop up, it is not working. What could be the problem.
JS:
(function() {
'use strict';
angular
.module('app.inspection')
.controller('mainCtrl', mainCtrl)
.controller('scheduleModalCtrl', scheduleModalCtrl);
mainCtrl.$inject = ['$scope', '$state', '$modal'];
function mainCtrl($scope, $state, $modal) {
$scope.schedule_modal = function() {
var modalView = $modal.open({
templateUrl:'schedule_modal.html',
backdrop: 'static',
controller: 'scheduleModalCtrl',
windowClass: 'modal-dialog-schedule'
});
}
scheduleModalCtrl.$inject = ['$scope', '$modalInstance'];
function scheduleModalCtrl($scope, $modalInstance) {
$('#date').datetimepicker({
format: 'DD/MM/YYYY'
});
}
})();
schedule_modal.html
<div class="col-xs-12 col-sm-12 col-md-12">
<label for="insp-date" class="label-style">Date</label>
<div class='input-group date' id='date'>
<input type='text' class="input-style" placeholder="dd/mm/yyyy"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
route.config.js :
.state('app.main', {
url: '/manageinspection',
title: 'Manage Inspection Page',
controller: 'mainCtrl',
templateUrl: helper.basepath('pages/main/main.html'),
resolve: helper.resolveFor('bootstrap','moment','bootstrapDateTimePicker')
})
I have include moment.js and bootstrapDateTimePicker constants in lazyload and in the route.config resolve. The datetimepicker is opening in mainCtrl(main page). It is not working in modal pop up, that is in scheduleModalCtrl.
I found several solutions, but they are all for ui-bootstarp datepicker but not for datetimepicker
Are you talking about angular-bootstrap-datetimepicker?
If you are, I had the same problem. The datepicker (using dropdown) never works fine on modal (at least bootstrap's modal).
My palliative solution, to maintain the consistency is "disable" the dropdown event on click in the input field. To execute the dropdown event, I'm using a 'input-group-addon' in this way:
<iframe width="100%" height="300" src="//jsfiddle.net/NandoMB/tLpbzkfj/27/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
Related
I have a multi step angular form using ui.router. I have a form html file that loads each step as a view. Each step has a button with a ui-sref link that takes the user to the next step. However it wont show the html 5 validation hints unless I remove the ui-sref. How can I have the validation work while still triggering the ui-sref at the same time?
my main form view:
<form ng-submit="processForm()" name="mortgage">
<div class="row">
<!-- our nested state views will be injected here -->
<div id="form-views" class="small-12 columns" ui-view></div>
</div>
</form>
my view html:
<h3>Please provide some information about your property</h3>
<label for="name">Zip Code</label>
<input type="text" pattern="[0-9]{5}" class="form-control" name="zipcode" type="number" ng-model="formData.zipcode" placeholder="Zip Code" required>
<button ui-sref="form.verify" type="submit" class="next">Next</button>
my controller
angular
.module('angularApp', [
'rzModule',
'btford.modal'
'ui.router'
])
.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/form/property-type');
$stateProvider
.state('form', {
url: '/form',
templateUrl: 'views/form.html',
controller: 'FormCtrl'
})
.state('form.info', {
url: '/property-info',
templateUrl: 'views/property-info.html'
})
.state('form.verify', {
url: '/property-verify',
templateUrl: 'views/property-verify.html'
})
.controller('FormCtrl', function($scope) {
$scope.formData = {};
$scope.processForm = function() {
console.log($scope.formData);
};
});
I have a UI Bootstrap modal with uib-tabs within. When I open the modal the first tab is "browser-focused" surrounded with a blue border, like this:
I'm using:
angular 1.5.8
Bootstrap css 3.3.7
UI Bootstrap 2.2.0
Here's a plunkr:
https://plnkr.co/edit/HjKjHegAQ1ReY39lSD2V?p=preview
js Code of the plunkr:
angular.module('fooApp', ['ui.bootstrap']);
angular.module("fooApp").controller("fooController", ["$scope", "$uibModal", function($scope, $uibModal) {
$scope.openModal = function () {
var modalScope = $scope.$new();
var modalInstance = $uibModal.open({
templateUrl: 'modal.html',
controller: 'modalController',
scope: modalScope,
size: 'lg'
});
modalInstance.result.then(function (result) {
}, null);
};
}]);
angular.module("fooApp").controller("modalController", ["$scope", "$timeout", function($scope, $timeout) {
}]);
html of the plunkr:
<div class="modal-body">
<uib-tabset>
<uib-tab select="ngGridFix()">
<uib-tab-heading>
<i class="glyphicon glyphicon-file" style="margin-right: 15px"></i>
<strong>Foo</strong>
</uib-tab-heading>
<p>Foo</p>
</uib-tab>
<uib-tab select="ngGridFix()">
<uib-tab-heading>
<i class="glyphicon glyphicon-question-sign" style="margin-right: 15px"></i>
<strong>Help</strong>
</uib-tab-heading>
<p>Help</p>
</uib-tab>
</uib-tabset>
</div>
Any clues on how to remove this blue border?
Ugh... I updated to bootstrap ui 2.5.0 (from 2.2.0) and this got solved (no blue border)
It appears to be fixed in bootstrap ui 2.3.1
https://github.com/angular-ui/bootstrap/blob/master/CHANGELOG.md
modal: revert focus behavior on open(8a4f625), closes #6295
I'm using bootstrap modal with angularjs along with datepair.
http://jonthornton.github.io/Datepair.js/
I'm working on creating a single page leave request calendar where I can add leave request to the calendar via a modal dialog box. When the box pops up, you pick your date and time you'll be absent from work. I'm experiencing an issue where the datepair doesn't work when nested within the modal dialog template.
The modal dialog works in the following code, but a click doesn't seem to trigger the calendar or time popup like in the demo link provided above. Everything works fine outside of the angularjs / modal template.
var app = angular.module('myModule', ['ui.bootstrap']);
app.controller('ModalDemoCtrl', function ($scope, $uibModal, $log) {
$scope.animationsEnabled = true;
$scope.open = function (size) {
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
$scope.toggleAnimation = function () {
$scope.animationsEnabled = !$scope.animationsEnabled;
};
});
//Please note that $modalInstance represents a modal window (instance) dependency.
//It is not the same as the $uibModal service used above.
app.controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, items) {
$http.get('./requestType.json')
.success(function (data) {
$scope.requestTypeList = data;
});
// initialize input widgets first
$('#requestForm .time').timepicker({
'showDuration': true,
'timeFormat': 'g:ia'
});
$('#requestForm .date').datepicker({
'format': 'm/d/yyyy',
'autoclose': true
});
// initialize datepair
var requestForm = document.getElementById('requestForm');
var datepair = new Datepair(requestForm);
$scope.ok = function () {
$uibModalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
});
html
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<form ng-submit="submitForm()" form-autofill-fix name="form">
<p id="requestForm">
<label>Request Type</label>
<select ng-model="formData.requestType" ng-options="rt.name for rt in requestTypeList track by rt.id" required class="form-control">
<option value="">- Select Request Type</option>
</select>
<label>Start Date</label><input type="text" class="form-control date start" ng-model="formData.startDate" required/>
<label>Start Time</label> <input type="text" class="form-control time start" ng-model="formData.startTime" required/>
<label>End Time</label><input type="text" class="form-control time end" ng-model="formData.endTime" required/>
<label>End Date</label><input type="text" class="form-control date end" ng-model="formData.endDate" required/>
<ul>
<li ng-repeat="item in items">
{{ item }}
</li>
</ul>
</p>
<input type="submit" value="Add to Agenda" class="btn btn-success"/>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
</script>
Now requestTypeList works perfectly to load the select menu, but if I click the date field, nothing pops up. What might be wrong?
I think the problem is that ModalInstanceCtrl is executing before template inserted to the DOM. The first rule of angular: do not use angular do not do DOM Manipulations from controllers, services or anywhere else but from directives.
So instead of doing this
$('#requestForm .time').timepicker({
'showDuration': true,
'timeFormat': 'g:ia'
});
from modal's controller make an directive for this:
(function () {
'use strict';
angular
.module('xp-timepicker', [])
.directive('xpTimepicker', timepicker);
function timepicker() {
return {
restrict: 'A',
link: function (scope, element, attrs) {
element.timepicker({
showDuration: true,
timeFormat: 'g:ia'
});
}
};
}
}());
// to use your directive in your app include it's module as dependency for your app module
angular
.module('app', ['xp-timepicker']);
Then place this directive on input fields you need:
<input type="text" ng-model="time" xp-timepicker>
I made a working plunker for you.
the z-index of bootstrap modal by default is 1050
the z-index of the date widget seems to be 1000 by default
hence the date widget will be "under" the modal.
you will have to do some css fixes if you want the date widget to be visible above the modal window
I am using angular-formly to build a form inside an angular-ui-bootstrap modal, the following code works when the form is placed outside the modal template but it doesn't when placed inside the ng-template, it just doesn't print the fields at all.
I believe this should work but I don't know how the life-cycle of angular-formly runs, so I am unable to identify how to make the fields show up inside my bootstrap modal template.
The issue is clearly related to the ng-template, it appears not to render the form even if the fields array is passed correctly.
var app = angular.module("demo", ['dndLists', 'ui.bootstrap', 'formly', 'formlyBootstrap']);
app.controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, items, User) {
var vm = this;
vm.loadingData = User.getUserData().then(function(result) {
vm.model = result[0];
vm.fields = result[1];
vm.originalFields = angular.copy(vm.fields);
console.log(vm);
});
});
app.controller("AdvancedDemoController", function($scope, $uibModal){
$scope.modalOpen = function(event, index, item){
var modalInstance = $uibModal.open({
animation: true,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: 'md',
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
});
In my view:
<!-- Template for a modal -->
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<div ng-if="vm.loadingData.$$state.status === 0" style="margin:20px 0;font-size:2em">
<strong>Loading...</strong>
</div>
<div ng-if="vm.loadingData.$$status.state !== 0">
<form ng-submit="vm.onSubmit()" novalidate>
<formly-form model="vm.model" fields="vm.fields" form="vm.form">
<button type="submit" class="btn btn-primary submit-button">Submit</button>
</formly-form>
</form>
</div>
<ul>
<li ng-repeat="item in items">
{{ item }}
</li>
</ul>
Selected: <b>{{ selected.item }}</b>
</div>
</script>
Any ideas?
When calling $uibModal.open you need to specify controllerAs: 'vm' (that's what you're template assumes the controller is defined as).
I'm developing an application using angularjs starting from https://github.com/firebase/angularfire-seed project. I'm trying to redirect from a controller to another without success. I need to do this from controller because i have some controls to do before redirect. I'm using location object for do it..
Here is my code for redirect:
$scope.infostore = function() {
$location.path( 'store' );
}
Here is my route configuration:
angular.module('myApp.routes', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/home', {
authRequired: true,
templateUrl: 'partials/home.html',
controller: 'HomeCtrl'
});
$routeProvider.when('/apps', {
authRequired: true,
templateUrl: 'partials/apps.html',
controller: 'appsController'
});
$routeProvider.when('/store', {
authRequired: true,
templateUrl: 'partials/store.html',
controller: 'storeController'
});
$routeProvider.otherwise({redirectTo: '/home'});
}]);
But every time i call the method 'infostore' in appsController angular redirect me to 'home'
Why? I just try to use apply() without success on main scope.
Here is my store controller:
'use strict';
app.controller('storeController', function($location, $firebase, $modal, $scope, database, $http, $rootScope, $routeParams) {
var ref = database.returnRef("users/"+$rootScope.auth.user.uid+"/apps");
$scope.apps = $firebase(ref);
});
Here is store html:
<div class="container">
<br />
<div class="row">
<div class="col-md-12 text-center">
<h3>
<span>{{ 'myappslong' | translate }}</span>
</h3>
</div>
</div>
<br />
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
store
</div>
<div class="col-md-1"></div>
</div>
</div>
Here is the URL from the first controller: http://localhost:8000/app/index.html#/apps
Solved, there was an error in my html code. Using location.path works correctly.