I use bootstrap and angularjs in my project.
I use Bootstrap 'Modals'. I'm trying to customize some of the default features.
How do I fire event handler in controller when I close the modal window by clicking on the background not the close button.
The hidden.bs.modal event fires whenever the modal is closed, no matter how you close it. See the docs.
EDIT
In the code snippet you showed me, the event was firing, but you were using $interval instead of setInterval.
$(document).ready(function () {
$("#closeModal").click(function () {
$("#modalWindow").modal("hide");
});
$("#modalWindow").on('hide.bs.modal', function () {
console.log("I fired");
var t = "333";
self.timer = setInterval(function () {
checkUpdate();
}, self.delay, false);
});
});
Whenever I'm having problems with events, I always put a console.log at the top of the callback function to make sure it is definitely being fired. 9/10 times it is and its the code in the callback that is crashing.
Related
I have a requirement where closing a child window should trigger a method in the parent window. I'm using angular for development and I'd really like to do it the angular way.
Window 1 controller:
var abc = $window.open(url);
$scope.$watch('abc.closed', function() {
// Do something when abc.close is true
};
This works, but there is a delay in the process. When the child window closes, the listener is being triggered rather late, like 20-40 seconds later.
What do you think is the issue, and also what's the best way to make this work?
I've seen other posts where people are using setInterval and watching for .closed but that would be a hack-ey way of doing it.
You can achieve this by using onbeforeunload event of the window
app.controller('yourCtrl', ['$window', function ($window) {
$window.onbeforeunload = function (evt) {
//Your Service/Logic
}
]);
I want to click the cancel button on an angular bootstrap modal. This should close the modal, which it does. I want to test that the modal is no longer visible and I am using the WebElement.isDisplayed() promise. I notice if I do NOT use browser.waitForAngular my test will NOT pass. The following code DOES work (I have defined my own page objects)
variableExpenseModal.cancel();
browser.waitForAngular();
expect(variableExpenseModal.modalIsDisplayed()).toEqual(false);
Is this the proper way to test this? Should I use browser.waitForAngular? Or am I missing some way to use promises to do this? Please advise.
The fix for my problem was to remove the animation in my conf.js (config) file.
onPrepare: function () {
// Disable animations so e2e tests run more quickly
//this will also prevent failure that are intermittent due to transitions
var disableNgAnimate = function () {
angular.module('disableNgAnimate', []).run(['$animate', function ($animate) {
$animate.enabled(false);
}]);
};
browser.addMockModule('disableNgAnimate', disableNgAnimate);
}
It was the transition/animation on the Modal that was causing my problem. also it was better for me to use isPresent() instead of isDisplayed(). When I did that I was able to remove the browser.waitForAngular()
it('click the save button and the modal should not be displayed', () => {
variableExpenseModal.save();
expect(variableExpenseModal.isPresent()).toEqual(false);
});
Note: My code is using a page object.
I want to prevent $scope.$destroy event in my nested controller in my page. I see the event object in callback function has method preventDefault, but it's not working as I expect.
$scope.$on('$destroy', function(event) {
event.preventDefault(); // don't working!
});
It is possible to prevent $destroy event?
plnkr Example
Does anyone know how to prevent the event from firing twice? I've tried using a controller scope level boolean variable to see if the event has already fired, but it did not work. It is like the event is firing on 2 separate threads and the variable was always false.
In the code below the $ionicPlatform.ready event is firing twice, but I can't figure out why.I'm using the current version of the Ionic Framework ionic-v1.0.0-beta.13.
angular.module('rsgApp.controllers', [])
.controller('MapCtrl', ['$ionicPlatform',
function ($ionicPlatform) {
var vm = this;
$ionicPlatform.ready(function () {
alert('device is ready');
});
}]);
Thanks TechMa9iac I was able to resolve this problem. In my tab template I had added an 'ng-controller' attribute to my ion-content tag. This is what was causing the $ionicPlatform.ready event to fire twice.
I need to open the menu automatically when navigate to a specific page.
but the event is ignored.
I created the menu controller:
.controller('MenuController', function ($scope, $ionicSideMenuDelegate) {
$scope.toggleLeft = function() {
$ionicSideMenuDelegate.toggleLeft();
}; })
and the specific page controller:
.controller('Sem_ConsultasCtrl', function ($scope) {
$scope.toggleLeft();
$scope.btn = function () { $scope.toggleLeft(); }
})
in my specific page i have a directive ng-click="btn()" wich works (toggles side-menu when click on button).
but if I call ' $scope.toggleLeft(); ' outside of btn() to automatically open the side menu when navigate to specific page nothing happens.
I found the problem:
when I call '$scope.toggleLeft();' outside of btn() the page/template still has not loaded/rendered the DOM. and when I click on button (btn()) works because DOM is already rendered.
to automatically open the side-menu I need to only call '$scope.toggleLeft();' when DOM is already and for achieve that I need to define a Watcher wich do something when occurs some modification to my template:
$timeout(function () {
$scope.toggleLeft();
});
$timeout(function () { //runs after DOM is render} );
This way, is working :)
EDIT:
I was going through my answers and I noticed that this answer was not correct.
calling $timeout triggers a digest cycle that captures differences in the DOM and updates it.
other events like clicking a button or writing in a input text triggers a digest cycle, thats why the changes only happened when clicked the button