I have a side menu with:
<ion-side-menus enable-menu-with-back-views="true">
So it is accesable from each view of my app. So now when there is a back view i have a back icon AND the menu icon in the top left nav-bar. How can i disable the menu-icon when there is a back-icon?
The method from here:
$scope.$on('$ionicView.beforeEnter', function (e, data) {
if (data.enableBack) {
$scope.$root.showMenuIcon = false;
} else {
$scope.$root.showMenuIcon = true;
}
});
Is not working! Because it is never called! Maybe $ionicView.beforeEnter does not exist anymore? At least it is never fired.
I solved that problem with this code in each view controller
$scope.$on('$ionicView.beforeEnter', function () {
$ionicSideMenuDelegate.canDragContent(false);
});
$scope.$on('$ionicView.leave', function () {
$ionicSideMenuDelegate.canDragContent(true);
});
Hope it helps
don't forget to add $ionicSideMenuDelegate to your controller
Related
I am trying to create a radio button, that when the user click "active" - an alert will appear. If he clicked cancel, stay (or go back) to the old value.
problem is, the what happens is that both of the radio buttons are "unchecked". and thats obviously not the wanted behaviour.
I've attached a code example.
code example
thanks in advance,
ben.
Add timeout before setting the value to false.
var app = angular.module('app', []);
app.controller('firstCtrl', function($scope,$timeout){
$scope.value = {
text : false
};
$scope.checkRadioButton = function() {
if ($scope.value.text === true) {
if (!window.confirm("Are you sure?")) {
$timeout(function(){
$scope.value.text = false;
});
}
}
}
});
I'm doing a check for a user state and would like to enable and disable a menu accordingly.
In the markup:
<a ... ng-click="ctrl.userMenu($event)"></a>
And in the controller:
ctrl.userMenu = function (e) {
if (ctrl.user.has.something) {
e.preventDefault();
return false;
} else {
ctrl.openMenu($mdOpenMenu, e);
}
};
However, this doesn't trigger the menu if the else case is true. I suspect a scope issue. I've also tried wrapping the menu service call in an anonymous function. The menu opens as expected if the call is made directly from the ng-click directive. Thanks for any assistance.
Turns out I was forgetting to pass the menu service along with the ng-click directive:
<a ... ng-click="ctrl.userMenu($mdOpenMenu, $event)"></a>
// ---------------------------------^
ctrl.userMenu = function (m, e) {
// -----------------------^
if (ctrl.user.has.something) {
e.preventDefault();
return false;
} else {
ctrl.openMenu(m, e);
// -----------^
}
};
I have a scroll up event and a scroll down event. I am trying to use FoundationAPI.animate to slideInUp a div on scroll up and then slideOutBottom on scroll down. The original state of the div has a class of hide because without scrolling - it lives off the bottom of the page. I have this working except for one problem. When the slideOutBottom animation is finished, the hide class no longer is in the div, so it shows after the slideOutBottom completes. I want it to stay hidden like it was at state 0.
Code:
$scope.scrollUp = function() {
if ($scope.lock == false ){
console.log('scrolling up');
$scope.lock = true;
FoundationApi.animate($('.footer-bar'), $state, "slideInUp", "hide");
console.log($state);
}
};
$scope.scrollDown = function() {
if ($scope.lock == true){
console.log('scrolling down');
$scope.lock = false;
FoundationApi.animate($('.footer-bar'), !$state, "hide", "slideOutBottom");
// setTimeout(function() {
// $('.footer-bar').addClass('hide');
// }, 999);
}
};
How do I access a callback for the FoundationAPI.animate(4) function such that it fires when it is complete? The commented out timeout works, but after the slideOutBottom finishes, the footer-bar appears, then the hide class gets applied. This causes the div to blink quickly. Anyone? The documentation on FoundationApi is lacking right now...
Not an answer but a solution. This a more natural AngularJS approach:
Controller:
function myController($scope, ...) {
$scope.lock = false;
$scope.scrollUp = function() {
if ($scope.lock == false ){
$scope.lock = true;
$scope.$apply();
}
};
$scope.scrollDown = function() {
if ($scope.lock == true){
$scope.lock = false;
$scope.$apply();
}
};
}
View:
<a id="footer" class="slideInUp slideOutBottom footer-bar" ng-hide="lock" zf-open="myModal">
<div>Click Me</div>
</a>
So the scroll events I bind with a directive on the particular view container; this determines the logic for when we detect the scroll up/down events. From the directive I call these functions that are defined the scoped controller (above). These are bound 2-ways with the "lock" variable accessible in this scope.
Note that the way the animations are triggered are with the classes in the anchor. I think there are defined enter animations and defined exit animations which are both present in the class. So ng-hide kicks in depending on the boolean value of the $scope.lock variable in my controller.
Totally not clear - I guess would be more clear to an Angular expert
This is what I have, and it works (thankfully, angular supports jQuery out of the box if its loaded)....but I'm wondering what the "angular way" is to accomplish this.
I want to close the open menu if you click anywhere else on the page, but the menu:
<body ng-click="onClickPage($event)">
//app controller:
$scope.onClickPage = function(e){
$log.log(e);
$rootScope.$broadcast('click:page', e);
};
//navbar controller
$rootScope.$on('click:page', function(ev, e){
var $el = $(e.target);
if ( !$el.parents('.menu').length && !$el.hasClass('.menu') ) {
$log.log('hide dropdown');
$scope.hideDropdown();
}
});
That might depend on how your dropdown is implemented but a general idea is to bind/unbind click event handler to the $document when open/close the dropdown.
By doing this way,it doesn't polute global event listeners and $rootScope while the dropdown is not opened.
function onDocumentClicked(e) {
var dropdownEl = angular.element('.dropdown');
if (e && dropdownEl && dropdownEl[0].contains(e.target)) {
return; // do nothing if clicked inside the dropdown
}
closeDropdown();
$scope.$apply();
}
function openDropdown() {
if (!$scope.dropdown.isOpen) {
$scope.dropdown.isOpen = true;
$document.bind('click', onDocumentClicked);
}
}
function closeDropdown() {
if ($scope.dropdown.isOpen) {
$document.unbind('click', onDocumentClicked);
$scope.dropdown.isOpen = false;
}
}
For the full example see: http://plnkr.co/edit/mbx0sLnPetctlWNYdpJC?p=preview
I am trying to close and reopen a dialog from the actual dialog controller's view. What ends up happening is that after dialog close/open, it won't properly close again. Escape works on some browsers (but the overlay remains) and clicking the background may cause the dialog to close but the overlay will remain (browser dependant).
Question: How can I close/reopen a dialog from a function/button/event on the dialog's controller and that the dialog's close works properly (on escape or clicking background).
The demo below is just a boiled down sample that demonstrates the issue as I will be doing a next/prev and I'd like to close/open on those clicks but am having this issue with not being able to exit the modal.
Here is the online demo: http://plnkr.co/h8djNiSlH6c7d8SNzMmb
Open dialog
Close dialog - works fine except IE (another issue).
Open dialog
Click button inside dialog to close/reopen
Try to close the dialog
Controllers:
function PopupCtrl($scope, $dialog, dialog, item, Utils) {
$scope.items = Utils.getItems();
$scope.item = item;
$scope.reOpen = function (item) {
item = $scope.items[1];
dialog.close();
var d = $dialog.dialog({
dialogFade: true,
backdropClick: true,
dialogOpenClass: 'modal-open',
resolve: {
item: function () {
return angular.copy(item)
}
}
});
d.open('dialog.html', 'PopupCtrl');
};
}
function MainCtrl($scope, $window, $dialog, $location, $timeout, Utils) {
$scope.items = Utils.getItems();
$scope.openDialog = function (item) {
item = $scope.items[0];
var d = $dialog.dialog({
dialogFade: true,
dialogOpenClass: 'modal-open',
resolve: {
item: function () {
return angular.copy(item)
}
}
});
d.open('dialog.html', 'PopupCtrl');
};
}
I've tried this with angular bootstrap v0.2.0 and v.0.3.0 so it is either a bug or there is something I am missing with regards to how I am coding the logic.
This turned out to be an issue with the core dialog directive. Filed a issue and consequent pull request to address:
Details here: https://github.com/angular-ui/bootstrap/pull/381